iam trying to create a smotth transition between 3 images inside a div using jquery. i have managed to get the needed opacity transition on moving mouse to any side of the div.Now i want to have some change in position also like this Click Here

But iam changing the left css propery but keeps on changing and doesnt stop.

html code is

<head>
    <meta charset="utf-8" />
    <title>testing sliding animation</title>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <script src="scripts/slider.js"></script>
    <link rel="stylesheet" type="text/css" href="style/main.css">
    <link rel="stylesheet" type="text/css" href="style/slide.css">
</head>
<body>
<div id="header">
</div><div id="slider" >
<div id="imagecontainer">
<img class="portrait" id = "img1" src = "images/cropp1.png">
<img class="portrait" id = "img2" src = "images/cropp1-2.png" >
<img class="portrait" id = "img3" src = "images/cropp2.png">
</div>
</div><div id="footer">
</div>
</body>

css code

#slider{
    position:relative; 
    width:100%; 
    height:100%;
    background:#FFF;
    margin:0;
    padding:0;

}
#slider .portrait{
    display:block;
    height:500px;
    width:453px; 
    position:absolute; 
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding:0;
}
#slider #img1{
    z-index:1;
}
#slider #img2{
    z-index:2;
}
#slider #img3{
    z-index:3;
}

javascript code is

    $(function(){
    var $win = $(window),
    w = 0,h = 0,
    opacity = 1,
    getWidth = function() {
        w = $win.width();
        h = $win.height();
    };
    $win.resize(getWidth).mousemove(function(e) {

        opacity = (e.pageX/w)*2;
        $("#img1").css({'opacity':function(){
                                if(e.pageX<(w/2)) 
                                        return 1;
                                else 
                                        return 0;//2-opacity;
                                        }
                                    });
        $("#img2").css({'opacity':function(){
                                if(e.pageX<(w/2)) 
                                        return opacity;
                                else 
                                        return 1;//2-opacity;
                                        }
                                    });
        $("#img3").css({'opacity':opacity-1});
        $("#slider").animate({left:'+=' + e.pageX + 'px'},"slow","easeout");


    }).resize();



});

Recommended Answers

All 5 Replies

So in the middle one image will be visible and stay at center, and at the ends one of the image will be visible with shifted positions.

It has to use Jquery animation but iam unable to get it.the image keeps on shifting if i use e.pageX value to update the left css property

here is a working example Click Here, but how do i change the position with jquery

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.