Reversing animation after 2 mouse over

Question

After the first mouse over this text, it should move by 200px to the right, after another mouse over the text returns to its starting position (200px to the left).

This is my code:

$(function() {

    var small = true;
    $('div').click(function() {
            small = !small;
            if (small) var properties = {
                    left: '0px'
                },
                "slow";
            else properties = {
                left: '100px'
            }, "slow"
        };

        $('.box').stop().animate(properties, 250);
    });
});

Answer 1

You have a type erro in your if else block , just remove the "slow" , and

annimation work :

See snippet :

 $(function() { val = 0; var properties; $('div').mouseover(function() { if(val<200) val+=100; else val =0; properties = { left: val+'px' } $('.box').stop().animate(properties, 250); }); }); 

 .box { background-color: red; display: block; width: 50px; height: 50px; position:absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="border:1px solid black">hover here</div> <span class="box">Box</span> 

You can also achive this using css transition (by removeing addin class)

See below snippet :

 $(function() { $('div').mouseover(function() { if($('.box').hasClass("left100px")) $('.box').toggleClass("left100px").addClass("left200px"); else if ($('.box').hasClass("left200px")) $('.box').toggleClass("left200px"); else $('.box').toggleClass("left100px"); }); }); 

 .box { background-color: red; display: block; width: 50px; height: 50px; position:absolute; transition: all .25s ease; left:0; } .left100px{ left:100px; } .left200px{ left:200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="border:1px solid black">hover here</div> <span class="box">Box</span> 

Answer 2

Use onmouseover and then toggle class to right and set margin-left in css
For animation use transition: all .5s ease;

 function func(){ $('.left').toggleClass("right"); } 

 div{ background-color:blue; width:150px; transition: all .5s ease; } .right{ margin-left:200px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div onmouseover="func()" class="left">try me</div> 

Answer 3

maybe below program will help you

 $(function() { var i = 0; var value; $('div').mouseover(function() { if(i<200){ i+=200; } else {i =0;} value = { left: i+'px' } $('div').stop().animate(value, 1000); }); }); 

 div { background-color: green; display: block; width: 100px; height: 100px; position:absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div >hover mouse corsor here</div>