jquery mouseover mouseout

Sveiki,

bandau padaryti toki dalyka kad uzvedus ant bloko pasikeicia paveikslelis nuvedus pele vel atsirastu senas paveikslelis. Viskas kaip ir veikia bet uzvedus ir judinant pele paveikslelio plote tie du paveiksleliai tai atsiranda tai pradingsta jei pele uvedus nejudinama tada viskas ok.

Gal kas zinok kur padariau klaida ir kaip tai reiktu istaisyti??

$("#img_1").mouseover(function(){
    $("#img_1_hover").fadeIn(function(){
         $("#img_1_hover").removeClass("none");
    });
}).mouseout(function(){
    $("#img_1_hover").fadeOut(function(){
         $("#img_1_hover").addClass("none");
    });
});

<a href="http://www.code-lt.com">

<img src="http://www.code-lt.com/pav1.jpg" 

onmouseover="this.src='http://www.code-lt.com/pav2.jpg';" 

onmouseout="this.src='http://www.code-lt.com/pav1.jpg';" />

</a>

Šitas kodas gal paprastesnis?

Sveiki,

 

bandau padaryti toki dalyka kad uzvedus ant bloko pasikeicia paveikslelis nuvedus pele vel atsirastu senas paveikslelis. Viskas kaip ir veikia bet uzvedus ir judinant pele paveikslelio plote tie du paveiksleliai tai atsiranda tai pradingsta jei pele uvedus nejudinama tada viskas ok.

 

Gal kas zinok kur padariau klaida ir kaip tai reiktu istaisyti??

 

$("#img_1").mouseover(function(){
    $("#img_1_hover").fadeIn(function(){
         $("#img_1_hover").removeClass("none");
    });
}).mouseout(function(){
    $("#img_1_hover").fadeOut(function(){
         $("#img_1_hover").addClass("none");
    });
});

Naudok .hover geriau:

http://api.jquery.com/hover/

Tas pats ką dabar darai, tik kodo mažiau.

Taip pat pasidaryk

var img1Hover = $("#img_1_hover");

Nereiks scriptui ieškot DOMe daug sykių to pačio id, o tik vieną syk.

Kitko Negaliu komentuot.

<a href="http://www.code-lt.com">

<img src="http://www.code-lt.com/pav1.jpg" 

onmouseover="this.src='http://www.code-lt.com/pav2.jpg';" 

onmouseout="this.src='http://www.code-lt.com/pav1.jpg';" />

</a>

 

Šitas kodas gal paprastesnis?

Manau kad tikrai taip :) Jei dar sugebetum apsviesti kaip prie tavo pasiulyto kodo prideti fadeIn ir fadeOut effektus butu visiskai saunu :)

Naudok .hover geriau:

http://api.jquery.com/hover/

 

Tas pats ką dabar darai, tik kodo mažiau.

 

Taip pat pasidaryk

var img1Hover = $("#img_1_hover");

Nereiks scriptui ieškot DOMe daug sykių to pačio id, o tik vieną syk.

 

Kitko Negaliu komentuot.

Pabandziau tavo pasiulyta varijanta ir vistiek gaunu toki pati varijanta :) uzvedus ir judinant pele atsirandine dingineja img :)

Na maniškis variantas klaidos išspręst ir neturėjo :D tik patariau kodą šiek tiek kaip optimizuot.

:)

Na o toliau, nežinau, neturiu patirties JQuery :D

$("#img_1").mouseover(function(){
    $("#img_1_hover").fadeIn(function(){
         $("#img_1_hover").removeClass("none");
    });
})
$("#img_1_hover").mouseout(function(){
    $("#img_1_hover").fadeOut(function(){
         $("#img_1_hover").addClass("none");
    });
});

arba

$("#img_1").on("mouseover", function(){
    $("#img_1_hover").fadeIn(function(){
         $("#img_1_hover").removeClass("none");
    });
})
$("#img_1_hover").on("mouseout", function(){
    $("#img_1_hover").fadeOut(function(){
         $("#img_1_hover").addClass("none");
    });
});

Esmė tame, kad tu abu eventus priskyrei tam pačiam paveiksėliui (#img_1). Kai pelę užvedi ant #img_1 jis pasislepia, o vietoj jo atsiranda #img_1_hover. Tai reiškia kad pelės kursorius yra užvestas ant #img_1_hover. Todėl antrą eventą (mouseout) reikia priskirt #img_1_hover. Tas eventas liepia #img_1_hover išnykti, kai kursorius bus nuo jo nuvestas į šoną.

visa tai gali pasidaryti su css

Naudok metodą .stop()

Tiesiog:

$("#img_1").mouseover(function(){
$("#img_1_hover").stop().fadeIn(function(){
	$("#img_1_hover").removeClass("none");     
});
}).mouseout(function(){
$("#img_1_hover").stop().fadeOut(function(){          
	$("#img_1_hover").addClass("none");     
});
});

$("#img_1").mouseover(function(){
    $("#img_1_hover").fadeIn(function(){
         $("#img_1_hover").removeClass("none");
    });
})
$("#img_1_hover").mouseout(function(){
    $("#img_1_hover").fadeOut(function(){
         $("#img_1_hover").addClass("none");
    });
});

arba

 

$("#img_1").on("mouseover", function(){
    $("#img_1_hover").fadeIn(function(){
         $("#img_1_hover").removeClass("none");
    });
})
$("#img_1_hover").on("mouseout", function(){
    $("#img_1_hover").fadeOut(function(){
         $("#img_1_hover").addClass("none");
    });
});

 

Esmė tame, kad tu abu eventus priskyrei tam pačiam paveiksėliui (#img_1). Kai pelę užvedi ant #img_1 jis pasislepia, o vietoj jo atsiranda #img_1_hover. Tai reiškia kad pelės kursorius yra užvestas ant #img_1_hover. Todėl antrą eventą (mouseout) reikia priskirt #img_1_hover. Tas eventas liepia #img_1_hover išnykti, kai kursorius bus nuo jo nuvestas į šoną.

Dekui uz pagalba :)