javascript - Sliding Div from left corner to right corner animation - Stack Overflow

admin管理员组

文章数量:1325589

I am using this animation, which is almost working fine i.e I am moving/sliding Div from left corner to right corner. Now the problem is, that Div is not reaching to the Edge of right corner.

Fiddle here: /

I am providing my code here too:

HTML:

<div class="main_container">
    <div class="container">
    </div>
</div> 

CSS:

.container {
   border: black 1px solid;
   width: 10px;
   height: 10px;
   background-color: red;
}  
.main_container {
   border: black 1px solid;
   width: 100%;
   height: 12px;
}

Jquery:

$('.container').animate({
     width: 100,
     marginLeft: 300,
     marginRight: 0,
     display: 'toggle'
}, 5000); 

I am using this animation, which is almost working fine i.e I am moving/sliding Div from left corner to right corner. Now the problem is, that Div is not reaching to the Edge of right corner.

Fiddle here: http://jsfiddle/b6KuE/16/

I am providing my code here too:

HTML:

<div class="main_container">
    <div class="container">
    </div>
</div> 

CSS:

.container {
   border: black 1px solid;
   width: 10px;
   height: 10px;
   background-color: red;
}  
.main_container {
   border: black 1px solid;
   width: 100%;
   height: 12px;
}

Jquery:

$('.container').animate({
     width: 100,
     marginLeft: 300,
     marginRight: 0,
     display: 'toggle'
}, 5000); 

• javascript
• jquery
• html
• css
• animation

Share Improve this question Follow edited Sep 19, 2013 at 11:32 Itay 16.8k22 gold badges5656 silver badges7272 bronze badges asked Sep 19, 2013 at 7:44 Hassan SardarHassan Sardar 4,5231717 gold badges6161 silver badges9292 bronze badges 2

• Make margin left property of the animation 100% or something like 1400px – Popsyjunior Commented Sep 19, 2013 at 7:48
• you need to change margin-left value. check this fiddle: jsfiddle/b6KuE/23 – AloneInTheDark Commented Sep 19, 2013 at 7:49

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

The simplest solution is using right and an absolute position.

jsFiddle Demo

JS:

$('.container').animate({ right: 0 }, 5000);

CSS:

.container {
    width:100px;
    position: absolute;
    right: 100%
}
.main_container {
    position: relative;
    overflow: hidden;
}

Check this fiddle. you have to define marginLeft according to width.

use this code.

$('.container').animate({
    width: 100,
    marginLeft: $(".main_container").width()-100,
    marginRight: 0,
    display: 'toggle'
}, 5000);

I you're moving it from left to right, the width property doesn't have to change. You need to set the margin left and position in the css properties like so:

$('.container').animate({
     position: 'absolute',
        marginLeft: '100%',
        marginRight: 0,
        display: 'toggle'
    }, 5000);

Updated code:

var containerWidth = $('.main_container').width();
var marginLeft = containerWidth - 100 - 2;
$('.container').animate({
    width: 100,
    marginLeft: marginLeft,
    marginRight: 0,
    display: 'toggle'
}, 5000);

Try this:

$('.container').animate({  
width: 100, 
right: 0, 
display: 'toggle'
 }, 5000);

Fiddle here: http://jsfiddle/b6KuE/49/

$('.container').animate({
        width: 100,
     marginLeft: '81.5%',
        marginRight: 0,
        display: 'toggle'
    }, 5000);

check this fiddle.

本文标签： javascriptSliding Div from left corner to right corner animationStack Overflow