Schieben Sie ein div-off-Bildschirm (mit margin: 0px auto)

Habe ich einen horizontal zentrierten div #box1 hat margin: 5px auto hat, nach Links schieben und aus dem Bildschirm, während #box2 gleitet in den Bildschirm von der rechten Seite, wenn Sie die Taste .class angeklickt. Ich habe gesehen, wie es durchgeführt wird, für absolut positionierte divs, jetzt, wie Sie es tun, wenn nicht?

HTML-Struktur

<div class="button"><a href="#">Slide</a> </div>

<div id="container">

    <div id="box1" class="box">Box #1</div>
    <div id="box2" class="box">Box #2</div>

</div>

Gescheiterten Versuch

$(".button").click(function() {
    $("#box1").css('margin-left', 0);
    $("#box1").css('margin-right', 0);
    $("#box1").animate({
            left: '150%',
        }, 'slow' );

});
  • Aktualisiert den ursprünglichen post mit meinem Versuch. Ich will nicht zu haben, um mit jQuery die position eines absolut positionierten div in die Mitte, dann animieren Sie die left css-Eigenschaft zu erreichen, die Folie.
InformationsquelleAutor Nyxynyx | 2012-03-13
  1. 1

    Ist dies der Effekt, den Sie suchen: jsFiddle-Beispiel.

    jQuery:

    $(".button").click(function() {
    $("#box1").css('margin-left', 0);
    $("#box1").css('margin-right', 0);
    $("#box1").animate({ left: '-500px' }, 'slow');
    $("#box2").animate({ left: '0px' }, 'slow');
});​

    CSS:

    #box1, #box2 {
    margin: 5px auto;   
    border: 1px solid #999;
    position:relative;
}
#box2 {
   left:500px;   
}
#container {
    overflow:hidden;
}

    HTML:

    <div class="button"><a href="#">Slide</a> </div>
<div id="container">
    <div id="box1" class="box">Box #1</div>
    <div id="box2" class="box">Box #2</div>
</div>​
    InformationsquelleAutor j08691
  2. 1

    Wenn Sie wollen, schieben Sie einen Tauchgang könnten Sie jQuery UI verstecken Methoden

    $(".button").click(function() {
    $("#box1").hide('slide', {
        direction: "left"
    }, 2000);
});

    und Sie können das gleiche tun, um die Folie in

    $("#box2").show('slide', {
    direction: "left"
}, 1000)
    InformationsquelleAutor Nicola Peluchetti
  3. 0

    Versuchen

    $(".button").click(function() {
    $("#box1").animate({
        marginLeft: '-150%',
    }, 'slow' );

});
    InformationsquelleAutor Nemoy
  4. 0

    Wenn Sie brauchen, es würde nicht schwierig sein, absolut positionieren Sie das element an der gleichen Stelle war es vor der animation.

    var elm = $("#box1");
var position = elm.position();
var cssObj = {
  'position' : 'absolute',
  'top' : position .top,
  'left' : position.left
}
elm.css(cssObj);
    InformationsquelleAutor Matthew Darnell
  5. 0

    Könnte dies für Sie arbeiten.

    $(".button a").click(function() {

    var $docWidth = $(window).width();
    var $boxOffset = $('#box1').offset();

    $("#box1").css('marginLeft', $boxOffset.left);
    $("#box1").animate({
        marginLeft: $docWidth
    }, 'slow');

});

    CSS:

    #container: { overflow: hidden; }

    http://jsfiddle.net/dZUXJ/

    InformationsquelleAutor feskr
Schreibe einen Kommentar