jQuery，滑動左文本與文本

我想滑動從隱藏狀態左＃文本幻燈片div幻燈片。我必須嘗試所有的變化，但不能得到它的工作。jQuery，滑動左文本與文本

$(document).ready(function() { 
    $("#top-2").animate({ 
     "top": "0px" 
    }, 1500, 'easeOutExpo'); 
    $("#btm-2").animate({ 
     "top": "0px" 
    }, 1500, 'easeOutExpo', function() { 
     $("#top-1").animate({ 
      "top": "0px" 
     }, 1500, 'easeOutExpo'); 
     $("#btm-1").animate({ 
      "top": "0px" 
     }, 1500, 'easeOutExpo', function() { 
      $("#top-3").animate({ 
       "top": "0px" 
      }, 1500, 'easeOutExpo'); 
      $("#btm-3").animate({ 
       "top": "0px" 
      }, 1500, 'easeOutExpo', function() { 
       $("#row-top").animate({ 
        "top": "-25" 
       }, 1000, 'easeOutExpo'); 
       $("#row-btm").animate({ 
        "top": "25px" 
       }, 1000, 'easeOutExpo'); 
       $("#text-slidein").animate({ 
        width: 'toggle' 
       }, 350, 1000, function() { 
        $(".fade").fadeOut(1000, function() { 
         $("#menu-nav").fadeIn(1000); 
         $("#news-box").fadeIn(1000); 
        }); 
       }); 
      }); 
     }); 
    }); 
});

我滑塊工作，當我用下面的幻燈片功能最接近：

$("#text-slidein").show('slide', {direction: 'right'}, 2000, function(){

出於某種原因，使用此代碼，滑塊會工作一次，然後將滑塊就不會顯示和所有我看到的是，在使用中滑動的空白區域。

$("#text-slidein").show('slide', {direction: 'right'}, 2000, function(){

我有一個sample on jsfiddle

幫助將不勝感激。由於

來源

2012-07-31 Phillip

你在你的問題發佈的代碼是不是你在的jsfiddle發佈，關於中的jsfiddle代碼相同的代碼，問題是，我們在調用

   $("#text-slidein").show('slide', { 
        direction: 'right' 
       }, 2000, function() { 
        $(".fade").fadeOut(1000, function() { 
         $("#menu-nav").fadeIn(1000); 
         $("#news-box").fadeIn(1000); 
        }); 
       });

和該簽名show是jQueryUI特有的，但沒有引用jQueryUI。當我檢查jQueryUI它似乎工作。

來源

2012-07-31 19:08:08 MHollis

一切似乎都工作，但是，你看不到＃text-slidein div標籤從右側滑入。任何人都可以提出爲什麼它不起作用？ – Phillip 2012-07-31 20:26:54

嗯，奇怪的是，我看到了Chrome 20，FF 14和IE 9中的＃text-slidein從右側滑入。以下是我正在查看的jsfiddle，已更新爲jQueryUI已檢查... http：// jsfiddle。 net/SPVXw/7/ – MHollis 2012-08-01 11:51:54

MHollis，謝謝你回來尋求幫助。我很感激。我真的去了，並再次嘗試。這次似乎有效。這次添加了jQuery UI鏈接。一切都顯現出來，動畫比kei的方法更流暢。再次感謝您爲此工作提供了很好的幫助。 – Phillip 2012-08-01 22:27:30

DEMO

作出代碼的一些變化：

CSS：

#text-slidein { 
    top: 260px; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #888; 
    font-size: 17px; 
    padding: 15px 0; 
    width: 0px; 
    height:8px; 
    position: absolute; 
    overflow:hidden; 
    margin-left:-800px 
}

的jQuery：

 $("#text-slidein") 
      .animate({ 
       width:800, 
       marginLeft:0 
      }, 2000, function() { 
       $(".fade").fadeOut(1000, function() { 
        $("#menu-nav").fadeIn(1000); 
        $("#news-box").fadeIn(1000); 
       }); 
      });

來源

2012-07-31 19:09:05 kei

感謝您的協助。我注意到你的動畫來自左邊，而動畫似乎是不連貫的，因爲文本不像整條線滑動，而是滑入其中。我希望文本行能夠順利地從右向左滑動。謝謝。 – Phillip 2012-07-31 20:23:43

kei，我回去了，並且將＃text-slidein css寬度800px和margin-left：800px設置爲使得幻燈片從右到左出現。 – Phillip 2012-07-31 20:50:46

kei，我回去了，並且使#text-slidein css寬度爲0，margin-left：800px使得幻燈片從右到左出現。但是，只要顯示：無;應用於＃text-slidein div，我不再在動畫中看到幻燈片。這種方法是否適合我的方法？ – Phillip 2012-07-31 21:00:39

jQuery，滑動左文本與文本

回答

相關問題