0

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();



});
2
Contributors
5
Replies
28
Views
3 Years
Discussion Span
Last Post by anuran
0

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.

Edited by anuran

0

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

Edited by anuran

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.