从屏幕上滑出几格。 jQuery的

Question

我使用此代码关闭屏幕上滑动格：

$('.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 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”键，不仅与输入幻灯片的股利也有“欢迎来到我的网站”。但我不希望用户能够通过点击“欢迎来到我的网站”来进行滑动。

任何想法，我怎么能做到这一点？

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

Btw。你的代码有错误。你给了两个Divs相同的ID。 ID必须是唯一的。