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（）＆amp; .mouseout（）事件来处理它。

jquery鼠标悬停动画

1 个答案: