Question

I’m using this code to slide div off the screen:

$('.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>

I would like to be able to slide something else than the div itself when I click on it.

For example, I would like to have something like:

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

And when I click on ‘Enter’, not only the div with Enter slides but also “Welcome to my site”. But I don’t wan’t the user to be able to slide by clicking on “Welcome to my site”.

Any idea on how I could accomplish that?

Answer 1

Simply select the other box with an the jQuery selector.

$('#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. you have an error in your code. You gave two Divs the same ID. IDs have to be unique.