CODEWITHSUNDEEP
javajquerycssjquery-animate
johnnE
johnnE

Reputation: 169

Jquery Slides, i want one open at all times

So i am trying to make this kinds "slideshow" using jquery slides. i have it right now so that the images slide when i hover, but i would like to have one of the images always expanded if the user is not hovering over an image.

Here's a link to the test page http://www.johnnyedick.com/indexSlideUpTop.html if you want a live view.

and here is the jquery i am using:

$(function() {

                $('#box1').hover(function() {
                    $(this).stop().animate({ "width" : "530px"}, 1000);
                }, function() {
                    $(this).stop().animate({ "width" : "100px"}, 1000);
                    });

                    $('#box2').hover(function() {
                    $(this).stop().animate({ "width" : "530px"}, 1000);
                }, function() {
                    $(this).stop().animate({ "width" : "100px"}, 1000);
                    });

                    $('#box3').hover(function() {
                    $(this).stop().animate({ "width" : "530px"}, 1000);
                }, function() {
                    $(this).stop().animate({ "width" : "100px"}, 1000);
                    });
            });

Thanks

Upvotes: 0

Views: 86

Answers (3)

Ram
Ram

Reputation: 144689

updated:

    $(function() {
    $('#box1, #box2, #box3').hover(function() {
        $(this).stop().animate({ "width" : "530px"}, 1000)
            }, function() {
                $(this).stop().animate({ "width" : "100px"}, 1000);
                   }).mouseleave(function(){
                     jQuery.fx.off = true;
                         });

Upvotes: 0

skip405
skip405

Reputation: 6279

I've written a simple function: http://jsfiddle.net/skip405/9NVWt/2/. Probably it will be useful. I believe it can be further perfected by someone more experienced in jQuery, I'm just a novice in it

Upvotes: 1

ShibinRagh
ShibinRagh

Reputation: 6646

add this code , after the hover function code

$('#box3').css('width','530px') ;

when page coming 3rd div showing normal size

Upvotes: 0

Related Questions