jquery 鼠标悬停动画

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() 事件来处理它。