Question

I had this working fine while using toggle, but I need to make these menu open on mouseover instead of click.

The page in question:
http://igs.link-networkonline.com/campaign-landing-page/

My Code:

$(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');
    });

}); 

This already took me alot of time to get running properly. I need each of the to slide up on mouse over and slide down on mouseout. Thank you.
});
`

Answer 1

You can use .mouseover() & .mouseout() event to handle it.