jQuery同時向左滾動和淡入淡出

我有以下代碼，它的工作非常好，可以向左滾動我的div。但我需要它們向左滾動並淡入，因爲它們向左滾動。jQuery同時向左滾動和淡入淡出

我該怎麼做？

$('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);

，這些文件的CSS被設置爲顯示：無

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

來源

2013-02-21 Chad Warren

'.fadeIn（1000）' - 你有沒有試過把它添加到你的代碼？ – Dawson 2013-02-21 21:29:54

你可以採取這種方式，擴大對布拉德·M的答案：

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

鑑於此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>

這個CSS：

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

你可以採用這種方法與您的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(); 
});

希望能給你一些關於如何管理這個問題的想法！布拉德的方法是一個好的開始，但它會同時動畫你所有的div，這並不是我想要的效果。

來源

2013-02-21 21:31:50

嘗試使用.animate（）方法。像下面

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

東西確保申報單原本具有的0％的不透明度，和你需要用正確的寬度進行試驗。

來源

2013-02-21 21:04:37

我試過，但似乎沒有工作.... – 2013-02-21 21:44:44

試試這個：

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

對我的約束到點擊事件的例子，但你可以採取的功能，當你需要使用。另外，如果你給所有的div的共同類，你可以一次全部移動：

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

這裏有一個的jsfiddle example

編輯：您還可以使用toggle到div滑動到基於左在它的寬度：

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

來源

2013-02-21 21:43:01 Jack

jQuery同時向左滾動和淡入淡出

回答

相關問題