jquery - How to implement a sliding animation in javascript correctly?

In my pursuit to learn javascript I am making the same slider, but with the animation on javascript (using css it is not an issue for me - it was made on the site google), as the one below:

Original Google slider (animation with css):
/

My work so far:

<!-- language-all: lang-html -->
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    #promo{
    display:block;
    height: 354px;
    width: 790px;
    }
    .promo-item {
        width: 81px;
        height: 354px;
        float: left;
    }
    .promo-item.wide {
        width: 613px;
    }
    .threeP {
        background-color: rgb(206, 203, 203);
    }
    .oneP {
        background-color: rgb(241, 220, 182);
    }
    .twoP {
        background-color: rgb(187, 217, 226);
    }
</style>
</head>
<body>
<div id="promo">
    <div class="promo-item twoP wide" id="twoP">
      <div>
      </div>
    </div>
    <div class="promo-item threeP" id="threeP">
      <div>
      </div>
    </div>
    <div class="promo-item oneP" id="oneP">
      <div>
      </div>
    </div>
</div>


<script type="text/javascript">
var oneP = document.getElementById('oneP');
var twoP = document.getElementById('twoP');
var threeP = document.getElementById('threeP');
step = 1;
            function expandPanel1(){
                var h = oneP.clientWidth + step;
                oneP.style.width = h+"px";
                if (h < 614 || h !=614) {
                    setTimeout("expandPanel1()", 5);
                } else { oneP.style.width = 613+"px"; }
            }               
            function expandPanel2(){
                var h = twoP.clientWidth + step;
                twoP.style.width = h+"px";
                if (h < 614 || h !=614) {
                    setTimeout("expandPanel2()", 5)
                } else { twoP.style.width = 613+"px"; }
            }               
            function expandPanel3(){
                var h = threeP.clientWidth + step;
                threeP.style.width = h+"px";
                if (h < 614 || h !=614) {
                    setTimeout("expandPanel3()", 5)
                } else { threeP.style.width = 613+"px"; }
            }   
            //---------------------------------------------
                function expandPanel1Minus(){
                    var h = oneP.clientWidth - step;
                    oneP.style.width = h+"px";
                    if (h > 80 || h !=80) {
                        setTimeout("expandPanel1Minus()", 5)
                    } else { oneP.style.width = 81+"px"; }
                }               
                function expandPanel2Minus(){
                    var h = twoP.clientWidth - step;
                    twoP.style.width = h+"px";
                    if (h > 80 || h !=80) {
                        setTimeout("expandPanel2Minus()", 5)
                    } else { twoP.style.width = 81+"px"; }
                }               
                function expandPanel3Minus(){
                    var h = threeP.clientWidth - step;
                    threeP.style.width = h+"px";
                    if (h > 80 || h !=80) {
                        setTimeout("expandPanel3Minus()", 5)
                    } else { threeP.style.width = 81+"px"; }
                }
            //---------------------------------------------
    oneP.onmouseover = function () {
        expandPanel1()
            expandPanel3Minus()
            expandPanel2Minus()
    } 
    twoP.onmouseover = function () {
        expandPanel2()
            expandPanel3Minus()
            expandPanel1Minus()
    } 
    threeP.onmouseover = function () {
        expandPanel3()
            expandPanel2Minus()
            expandPanel1Minus()
    }
</script>

I know this example has errors because if a long drive with the mouse on the slider, it begins to "violently" run :) I deliberately lowered animation speed.

Can someone give me some guidance on how to implement this correctly?

In my pursuit to learn javascript I am making the same slider, but with the animation on javascript (using css it is not an issue for me - it was made on the site google), as the one below:

Original Google slider (animation with css):
http://www.google./about/datacenters/inside/

My work so far:

http://jsfiddle/TS7Xu/3/

<!-- language-all: lang-html -->
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    #promo{
    display:block;
    height: 354px;
    width: 790px;
    }
    .promo-item {
        width: 81px;
        height: 354px;
        float: left;
    }
    .promo-item.wide {
        width: 613px;
    }
    .threeP {
        background-color: rgb(206, 203, 203);
    }
    .oneP {
        background-color: rgb(241, 220, 182);
    }
    .twoP {
        background-color: rgb(187, 217, 226);
    }
</style>
</head>
<body>
<div id="promo">
    <div class="promo-item twoP wide" id="twoP">
      <div>
      </div>
    </div>
    <div class="promo-item threeP" id="threeP">
      <div>
      </div>
    </div>
    <div class="promo-item oneP" id="oneP">
      <div>
      </div>
    </div>
</div>


<script type="text/javascript">
var oneP = document.getElementById('oneP');
var twoP = document.getElementById('twoP');
var threeP = document.getElementById('threeP');
step = 1;
            function expandPanel1(){
                var h = oneP.clientWidth + step;
                oneP.style.width = h+"px";
                if (h < 614 || h !=614) {
                    setTimeout("expandPanel1()", 5);
                } else { oneP.style.width = 613+"px"; }
            }               
            function expandPanel2(){
                var h = twoP.clientWidth + step;
                twoP.style.width = h+"px";
                if (h < 614 || h !=614) {
                    setTimeout("expandPanel2()", 5)
                } else { twoP.style.width = 613+"px"; }
            }               
            function expandPanel3(){
                var h = threeP.clientWidth + step;
                threeP.style.width = h+"px";
                if (h < 614 || h !=614) {
                    setTimeout("expandPanel3()", 5)
                } else { threeP.style.width = 613+"px"; }
            }   
            //---------------------------------------------
                function expandPanel1Minus(){
                    var h = oneP.clientWidth - step;
                    oneP.style.width = h+"px";
                    if (h > 80 || h !=80) {
                        setTimeout("expandPanel1Minus()", 5)
                    } else { oneP.style.width = 81+"px"; }
                }               
                function expandPanel2Minus(){
                    var h = twoP.clientWidth - step;
                    twoP.style.width = h+"px";
                    if (h > 80 || h !=80) {
                        setTimeout("expandPanel2Minus()", 5)
                    } else { twoP.style.width = 81+"px"; }
                }               
                function expandPanel3Minus(){
                    var h = threeP.clientWidth - step;
                    threeP.style.width = h+"px";
                    if (h > 80 || h !=80) {
                        setTimeout("expandPanel3Minus()", 5)
                    } else { threeP.style.width = 81+"px"; }
                }
            //---------------------------------------------
    oneP.onmouseover = function () {
        expandPanel1()
            expandPanel3Minus()
            expandPanel2Minus()
    } 
    twoP.onmouseover = function () {
        expandPanel2()
            expandPanel3Minus()
            expandPanel1Minus()
    } 
    threeP.onmouseover = function () {
        expandPanel3()
            expandPanel2Minus()
            expandPanel1Minus()
    }
</script>

I know this example has errors because if a long drive with the mouse on the slider, it begins to "violently" run :) I deliberately lowered animation speed.

Can someone give me some guidance on how to implement this correctly?

Share Improve this question edited Oct 24, 2012 at 17:24 afuzzyllama 6,5485 gold badges49 silver badges64 bronze badges asked Oct 24, 2012 at 17:00 user1769072 531 silver badge5 bronze badges

You could pletely do this with css3. Working on an example for you. – tobspr Commented Oct 24, 2012 at 17:03
@tobias-springer I know it can be done with css (for me it is quite simple), but I'm learning javascript and I am very interested to do this with him. – user1769072 Commented Oct 24, 2012 at 17:07
Okay, but here's the css solution: jsfiddle/aJzgJ/4/embedded/result – tobspr Commented Oct 24, 2012 at 17:13
willing to use jQuery or should it be javascript only? – JFK Commented Oct 24, 2012 at 18:12
@JFK Does not matter. Quite simply, even a verbal description of the algorithm. I do not want anyone here to strain unnecessary work for him. If you are ready to take part in this - I'm just glad. Do not put me here a framework for you, in any case, it looks stupid on my part and not fair :) – user1769072 Commented Oct 25, 2012 at 2:07

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

Here's a pure JS implementation - JSFiddle link. In case the fiddle didn't get saved, here's the JS bit only. The rest of the HTML is same as the OP. the function go is called on body load.

var f, s, t;
var which;

function go() {
    f = document.getElementById('oneP');
    s = document.getElementById('twoP');
    t = document.getElementById('threeP');

    which = s;

    f.onmouseover = function() {
        foo(this)
    };

    s.onmouseover = function() {
        foo(this)
    };

    t.onmouseover = function() {
        foo(this)
    };
}

function foo(e) {
    if (e.clientWidth < 613) {
        e.style.width = (e.clientWidth) + 10 + "px";
        which.style.width = (which.clientWidth - 10) + "px";

        setTimeout(function() {
            foo(e);
        }, 5);
    }
    else if (e.clientWidth > 613) {
        e.style.width = "613px";
        which.style.width = "81px";

        which = e;
    }
}

There is a bit of work left I think, the animation is not fast enough so it is possible to mouse over on another section while the animation is running. I leave that bit to you :)

If you want to save a lot of time, you should do it with jQuery. Try this http://jsfiddle/QXRVb/ sollution. In that example, I didn't preferd to resizing divs. I used Z-indexes and jQuery animate to move them. In that way its easier to make a right position for them.

<style>
#promo{
    width:900px;
    height:300px;
    position:absolute;
    top:0px;
    left:0px;
    overflow:hidden;
}
#oneP{
    width:600px;
    height:300px;
    position:absolute;
    top:0px;
    left:0px;
    background:#999;
    z-index:1;
}
#twoP{
    width:600px;
    height:300px;
    position:absolute;
    top:0px;
    left:150px;
    background:#ddd;
    z-index:0;
}
#threeP{
    width:600px;
    height:300px;
    position:absolute;
    top:0px;
    left:750px;
    background:#666;
    z-index:1;
}
</style>

<html>
<div id="promo">
<div id="oneP">    
</div>
<div id="twoP">     
</div>
<div id="threeP">     
</div>
</div>
</html>

<script>
$('#oneP').mouseover(function() {
    $('#oneP').animate({
        left: 0
    },200);
    $('#threeP').animate({
        left: 750
    },200);
    $('#twoP').animate({
        left: 450
    },200);
});

$('#twoP').mouseover(function() {
    $('#oneP').animate({
        left: -450
    },200);    
    $('#threeP').animate({
        left: 750
    },200);
    $('#twoP').animate({
        left: 150
    },200);
});

$('#threeP').mouseover(function() {
    $('#threeP').animate({
        left: 300
    },200);    
    $('#oneP').animate({
        left: -450
    },200);
    $('#twoP').animate({
        left: -150
    },200);
});
</script>`

With this method you can easily put image tag inside divs.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745510177a4630736.html

jquery - How to implement a sliding animation in javascript correctly? - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

jquery - How to implement a sliding animation in javascript correctly? - Stack Overflow

2 Answers 2

相关推荐