jquery mouseover动画

Question

我在使用切换时可以正常工作，但我需要在鼠标悬停而不是点击时打开这些菜单。

有问题的网页： http://igs.link-networkonline.com/campaign-landing-page/

我的代码：

$(function() { 
$("img.button1").toggle(function() { 
    $(".first").animate({'height': '295px', 'top': "-270px"}); 
    $("img.button1").animate({'top': "-235px"}); 
    $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png'); 
    $("body").animate({'padding-bottom': '-300px'}); 
}, function() { 
    $(".first").animate({'height': '75px', 'top': "-58px", 'overflow': "hidden"}); 
    $("img.button1").animate({'top': "-25px"}); 
    $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png'); 
}); 
    $("img.button2").toggle(function() { 
     $(".second").animate({'height': '285px', 'top': "-268px"}); 
     $("img.button2").animate({'top': "-240px"}); 
     $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png'); 
    }, function() { 
     $(".second").animate({'height': '75px', 'top': "-58px"}); 
     $("img.button2").animate({'top': "-25px"}); 
     $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png'); 
    }); 
$("img.button3").toggle(function() { 
    $(".third").animate({'height': '260px', 'top': "-243px"}); 
    $("img.button3").animate({'top': "-210px"}); 
    $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png'); 
}, function() { 
    $(".third").animate({'height': '75px', 'top': "-58px"}); 
    $("img.button3").animate({'top': "-25px"}); 
    $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png'); 
}); 

$(".first").toggle(function() { 
    $(".first").animate({'height': '295px', 'top': "-270px"}); 
    $("img.button1").animate({'top': "-235px"}); 
    $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png'); 
    $("body").animate({'padding-bottom': '-300px'}); 
}, function() { 
    $(".first").animate({'height': '75px', 'top': "-58px", 'overflow': "hidden"}); 
    $("img.button1").animate({'top': "-25px"}); 
    $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png'); 
}); 
    $(".second").toggle(function() { 
     $(".second").animate({'height': '285px', 'top': "-268px"}); 
     $("img.button2").animate({'top': "-240px"}); 
     $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png'); 
    }, function() { 
     $(".second").animate({'height': '75px', 'top': "-58px"}); 
     $("img.button2").animate({'top': "-25px"}); 
     $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png'); 
    }); 
    $(".third").toggle(function() { 
     $(".third").animate({'height': '260px', 'top': "-243px"}); 
     $("img.button3").animate({'top': "-210px"}); 
     $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png'); 
    }, function() { 
     $(".third").animate({'height': '75px', 'top': "-58px"}); 
     $("img.button3").animate({'top': "-25px"}); 
     $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png'); 
    }); 

}); 

这已经花了我很多时间来获得正常运行。我需要每个鼠标滑过鼠标，然后滑出鼠标。谢谢。 }）; `

Answer 1

您可以使用.mouseover（）& .mouseout（）事件来处理它。