0

このコードを使用して、画面から div をスライドさせています。 

$('.box').one('click', function() {
var $this = $(this);
if (this.id !== 'box4'){
$this.animate({
    left: '-50%'
}, 500, function() {
    $this.css('left', '150%');         
    $this.appendTo('#container');

});

$this.next().animate({
    left: '50%'
}, 500);
}
});

CSS:

.box {
position: absolute;
left: 150%;
margin-left: -25%;
}

#box1 {

left: 50%;
}

html: 

<div id="container">  
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>

 </div>

divをクリックすると、div自体以外のものをスライドできるようにしたいと思います。

たとえば、次のようなものが必要です。

       <div id="container">
 <div id="welcomebox"> Welcome on my site </div>
<div id="box1" class="box">Enter</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>

 </div>

そして、「Enter」をクリックすると、Enter スライドのある div だけでなく、「Welcome to my site」もスライドします。しかし、ユーザーが「私のサイトへようこそ」をクリックしてスライドできないようにしたくありません。

どうすればそれを達成できるかについてのアイデアはありますか?

4

1 に答える 1

1

jQueryセレクターで他のボックスを選択するだけです。 

$('#box1').one('click', function() {
    var thisbox = $(this);
    var otherbox = $('#welcomebox');
    // method to animate thisbox
    thisbox.animate({
        // animations
    });
    // method to animate the welcomebox
    otherbox.animate({
        // animations
    });
});

ところで。コードにエラーがあります。2つのDivに同じIDを与えました。IDは一意である必要があります。

于 2012-12-17T10:57:17.553 に答える