jQuery scroll left et fadeIn en même temps

Question

J'ai le code suivant et il fonctionne très bien pour faire défiler mes divs vers la gauche. Mais j'ai besoin qu'elles défilent à la fois vers la gauche et qu'elles s'affichent en fondu lorsqu'elles défilent vers la gauche.

Comment puis-je le faire ?

$('div#line1').delay(1000).show("slide", { direction: "right" }, 1500);
$('div#line2').delay(2000).show("slide", { direction: "right" }, 1500);
$('div#line3').delay(3000).show("slide", { direction: "right" }, 1500);

La feuille de style en cascade (CSS) est définie comme suit : display:none.

#line1,
#line2,
#line3{
display: none;
}

Answer 1

Vous pourriez adopter ce genre d'approche, en développant la réponse de Brad M :

http://jsfiddle.net/mori57/Gqttc/

Étant donné ce HTML :

<div id="clickme">Click here</div>
<div id="lines">
    <div id="line1">
        <img src="http://placehold.it/350x40" alt="" />
    </div>
    <div id="line2">
        <img src="http://placehold.it/350x40" alt="" />
    </div>
    <div id="line3">
        <img src="http://placehold.it/350x40" alt="" />
    </div>
</div>

et ce CSS :

#lines div {
    opacity:0;
    margin-left:-400px
}

vous pouvez adopter cette approche avec votre jQuery :

// get your lines into an array
var lines = $("#lines div");
// set a counter
var currAnim = 0;

// this method will animate a line
var fadeMoveIn = function (line) {
    $(line).animate({
        opacity: 1,
        marginLeft: 10
    }, {
        queue: true,
        duration: 1000,
        complete: function () {
            // when this line's animation is done
            // trigger the next in the queue
            startQueue();
        }
    });
};

// this function will fire off your animations one by one
var startQueue = function () {
    // increment the queue and send that line to be animated
    fadeMoveIn(lines[currAnim++]);
};

$("#clickme").click(function () {
    startQueue();
});

J'espère que cela vous donne quelques idées sur la façon dont vous pouvez gérer cela ! La méthode de Brad est un bon début, mais elle animera toutes vos divs simultanément, ce qui n'est pas tout à fait l'effet que vous recherchez, je pense.

Answer 2

Essayez d'utiliser la méthode .animate(). Quelque chose comme ce qui suit

$(divs).animate({
     width: 100,
     opacity: 100
});

Assurez-vous que les divs ont une opacité de 0 % à l'origine, et vous devrez expérimenter avec les largeurs correctes.

Answer 3

Essayez ça :

$("#div1").click(function() {
     $('#div1').animate({"left": -200, "opacity": "toggle" }, "slow");
});

Pour l'exemple, j'ai lié cette fonction à l'événement de clic, mais vous pouvez prendre la fonction et l'utiliser selon vos besoins. De plus, si vous donnez une classe commune à tous les divs, vous pouvez les déplacer tous en même temps :

 $('.moveMe').animate({"left": -200, "opacity": "toggle" }, "slow");

Voici un JSFiddle exemple

Edit : Vous pouvez aussi utiliser toggle pour faire glisser le div vers la gauche en fonction de sa largeur :

$('#div1').animate({"width": toggle, "opacity": "toggle" }, "slow");