JQuery on Hover stop повторение

Question

Я показываю div + текст, используя Hover на элементе Div1. Я бы хотел, чтобы анимация показывалась только один раз и не раз каждый раз, когда мышь снова помещается на элемент. Кроме того, есть ли другая функция, которую я могу использовать вместо Hover для запуска анимации, когда div появляется в представлении?

$(".div1").hover(function(){ 
    $(".div2").slideToggle(); 
    $(".div3").slideUp(300).fadeIn("slow"); 
    $(".div4").slideUp(300).delay(300).fadeIn("slow"); 
    $(".divintro").hide(); 
    $(".divtext1").fadeIn("slow"); 
    $(".divtext2").fadeIn("slow"); 
}, function(){}); 

EDIT: я решил пойти другой путь и она работает более или менее, с

if($('#div1').is(':visible')) { 
     $(".div2").stop().slideToggle({direction: "up"}, 300).delay(100); 
     $(".div3")..delay(200).fadeIn("slow"); 
     $(".div4")..delay(400).fadeIn("slow"); 
     $(".divtext1").fadeIn("slow"); 
     $(".divtext2").fadeIn("slow"); 
} 

Div1 приходит в вид, когда видны, но если я уйду от этого DIV (на странице) и вернуться к нему, анимация начинается снова, но DIV3 и DIV4 снова не исчезают, видимы еще до DIV2 Toggle. Любые идеи?

Answer 1

Вы можете попробовать stop() функцию: (». Div1").

$(".div1").stop().hover(function(){ .... 

Answer 2

Я был в состоянии работать его с

if($('#div1').is(':visible')) { 
//alert("is visible"); 
$(".div2").slideToggle({direction: "up"}, 300).delay(100); 
$(".div3").delay(200).fadeIn("slow"); 
$(".div4").delay(400).fadeIn("slow"); 
$(".divtext1").fadeIn("slow"); 
$(".divtext2").fadeIn("slow"); 
stopPropagation(); 
}else{ 
//alert("not visible"); 
$(".div2").slideUp('fast'); 
$(".div3").attr("style", "display:none;"); 
$(".div4").attr("style", "display:none;"); 
}