0

私はこのアニメーションを使用していますが、これはほぼ正常に動作しています。つまり、Div を左隅から右隅に移動/スライドさせています。問題は、Div が右隅の Edge に達していないことです。

ここでフィドル: http://jsfiddle.net/b6KuE/16/

ここでもコードを提供しています：

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;
}

Jクエリ: 

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

7 に答える 7

4

最も簡単な解決策は、rightと を使用することabsolute positionです。

jsFiddle デモ

JS:

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

CSS:

.container {
    width:100px;
    position: absolute;
    right: 100%
}
.main_container {
    position: relative;
    overflow: hidden;
}
于 2013-09-19T07:52:19.333 に答える
3

このフィドルを確認してください。marginLeft幅に応じて定義する必要があります。

于 2013-09-19T07:53:12.977 に答える
1

このコードを使用してください。

$('.container').animate({
    width: 100,
    marginLeft: $(".main_container").width()-100,
    marginRight: 0,
    display: 'toggle'
}, 5000);
于 2013-09-19T07:51:15.027 に答える
0

これを試して：

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

ここでフィドル: http://jsfiddle.net/b6KuE/49/

于 2013-09-19T08:04:03.140 に答える
0 
$('.container').animate({
        width: 100,
     marginLeft: '81.5%',
        marginRight: 0,
        display: 'toggle'
    }, 5000);

このフィドルをチェックしてください。

于 2013-09-19T08:04:14.953 に答える