Vajon miért nem működnek így a jquery/javascript effektek?
Van egy kódom, egy képnézegető. A lényeg az, hogy találtam undorítóan csicsás effekteket, de csak a hide megy nekik, a show nem működik a kódomban egy click eseményre. ez a kód:
Tényleg nem akarok senkit fárasztani az a lényeg, hogy mindig átkerül a current class a következő képre, az aktuális current pedig hide-ol. Az ötletet a netről szedtem, nem én találtam ki, egyébként csak explode effekttel megy, mással nem.
Itt vannak legalul ezek a szörnyű áttűnések:
http://www.tutorialspoint.com/jquery/jquery-effects.htm
Legalul! Semmivel nem szuperál a dolog, csak és kizárólag az explode effekttel, ha mondjuk slide-ot rakok be, akkor eljut a hide-ig, de nem jeleníti meg, a show ebben a kódban elfelejtődik. Vajon miért lehet ez?
<html>
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function(){
var a = 1;
$("#sum").text($("#piccontainer img").length);
var first_image = $("#piccontainer img:first-child");
var last_image = $("#piccontainer img:last-child");
$("#piccontainer img").hide();
first_image.addClass("current").show();
document.getElementById("demo").innerHTML = a;
var title = $("#piccontainer img").attr("alt");
$("#title").text(title);
$("#next").click(function() {
a+=1;
var current_image = $("#piccontainer img.current");
current_image.removeClass("current").hide("explode", {pieces: 64 }, 1000);
var titleactual = (current_image.next()).attr("alt");
$("#title").text(titleactual);
if (a<8) {
document.getElementById("demo").innerHTML = a;
current_image = current_image.next().addClass("current");
current_image = current_image.show("explode", {pieces: 64 }, 1000);
}
else {
current_image = first_image.addClass("current").show("explode", {pieces: 64 }, 1000);
$("#demo").text(1);
var titlefirst = $("#piccontainer img:first-child").attr("alt");
$("#title").text(titlefirst);
a=1;
}
});
$("#prev").click(function() {
var current_image = $("#piccontainer img.current");
current_image.removeClass("current").animate({opacity: 0, height: "0px", width: "0px"}, 500);
var titleactual = (current_image.prev()).attr("alt");
$("#title").text(titleactual);
if (a>1) {
a-=1;
document.getElementById("demo").innerHTML = a;
current_image = current_image.prev().addClass("current").animate({opacity: 1, height: "540px", width: "960px"}, 500);
}
else {
current_image = last_image.addClass("current").animate({opacity: 1, height: "540px", width: "960px"}, 500);
$("#demo").text($("#piccontainer img").length);
var titlelast = $("#piccontainer img:last-child").attr("alt");
$("#title").text(titlelast);
a=a+6;
}
});
});
</script>
<style>
#piccontainer {
width:960px;
height:540px;
padding:10px;
border: medium solid #000000;
}
#piccontainer img {
width:960px;
height:540px;
}
#id1 {
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
position:absolute;
}
#id2 {
position:absolute;
}
#piccontainer img {
position:absolute;
}
#demo {
margin:auto;
float:left;
}
#sum {
margin:auto;
float:left;
}
#per {
float:left;
margin:auto;
margin-right:5px;
margin-left:5px;
}
#prev {
}
#next {
}
#title {
width:350px;
height:30px;
font-color:#FFFFFF;
font-size:20px;
text-align:center;
line-height:26px;
margin:auto;
background-color:#CCCCCC;
}
.buttoncontainer {
width:350px;
height:100px;
margin-left:auto;
margin-right:auto;
}
.container {
width:960px;
height:540px;
font-color:white;
}
.demopersum {
height:50px;
width:50px;
margin:auto;
}
.prevnext {
height:30px;
width:280px;
margin:auto;
}
</style>
</head>
<body>
<div id="piccontainer">
<img src="1.jpg" data="1" alt="Szélkerekek egy tanyán">
<img src="2.jpg" data="2" alt="A naplemente és a hős">
<img src="3.jpg" data="3" alt="Kavicsok">
<img src="4.jpg" data="4" alt="Szürreális világ">
<img src="5.jpg" data="5" alt="Pozitív érzés">
<img src="6.jpg" data="6" alt="A tenger">
<img src="7.jpg" data="7" alt="Éjjeli park">
</div>
<div class="container">
<div class="buttoncontainer">
<div id="title"></div>
<br>
<div>
<div class="prevnext">
<button id="prev">prev image</button>
<button id="next">next image</button>
<button id="wide">teljes képernyő</button>
</div>
</div>
<div class="demopersum">
<div id="demo"></div>
<div id="per"> / </div>
<div id="sum"></div>
</div>
</div>
</div>
</body>
</html>
Ha valaki véletlenül ilyen problémával küzd az a megoldás, hogy amikor eltűnik, akkor csak simán $(".valami").hide()
Amikor előtűnik, akkor pedig mehet az effekt. Vagy fordítva!
válasza:#1 js kódot soha ne illessz be ide, erre ott van a js fiddle, elég ha belinkeled. Rlég idegesítő, hogy fél órákat kell mobilon legörgetni.
#2 amíg a natív js programozás nem megy, addig ne foglalkozz jQueryvel. Autóvezetésnél is előbb a kreszt tanuljuk meg.
#3 a jQuery ismerete nélkül nehézkes jól implementálni, ismerd meg először a környezetet. ;)
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!