連続jQueryの

グッド日、連続jQueryの

を使用して左にスライドのアニメーション私はここにして（無成功で）さまざまなGoogle検索で見つかった両方の様々な方法を試してきました。私はこの "Microsoft Page"にある "トッププロダクトビューア"の機能を再作成しようとしています（ページの上にある回転子のすぐ下にあります）。私はCSSとレイアウトに関してとてもうまくやっていました。しかし、私はを深刻に受けていますアニメーションを動作させるのに問題があります。

スライドを常に左にアニメートしたいと思います。

すべてのヘルプが評価されています。私は新鮮なオプションを探しているので、animateLeftOnly機能をくみ上げました。

UPDATE：
以下のヘルプは非常に有用でした。しかし、範囲の変更は私を別の方法に変えました。以下はその全体的にFINAL WORKING VERSIONは、次のとおりです。

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 

    <script src="Scripts/jQuery/Core/jquery-1.6.2.min.js" type="text/javascript"></script> 

    <style type="text/css"> 

     /* This styling is assumed to come-in from a master set of CSS files */ 
     body, select { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; } 
     h3 { font-family: Segoe UI, Tahoma, Arial, Verdana, sans-serif; font-size: 11pt; font-weight: normal;} 
     h4 { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; font-size: 9pt; font-weight: normal;} 
    </style> 

    <style type="text/css"> 

     /* This is the styling for the control (itself) */ 
     .metroPivot { border: 1px solid #D3D3D3; height: 250px; width: 930px; overflow: hidden; } 
     .metroPivot .header { border-bottom: 1px solid; padding: 0px 0px 0px 15px; background-color: #FFFFFF; border-bottom-color: #D3D3D3; color: #4F4F4F; } 
     .metroPivot .header h3 { font-size: 162.5%; margin-bottom: 10px; } 

     .metroPivot .content-categories { width: auto; } 
     .metroPivot .content-categories div { float: left; } 
     .metroPivot .content-categories div.current 
     { 
      background-image: url(http://i.microsoft.com/global/en-us/homepage/PublishingImages/Sprites/white-carousel.png); 
      background-position: -55px -61px; 
      overflow: hidden; 
      background-repeat: no-repeat; 
     } 

     .metroPivot .content-categories div h4 { width: 115px; float: left; text-align: center; font-size: 81.5%; border-right: 1px solid #4F4F4F; } 
     .metroPivot .content-categories div h4 a { padding-top: 10px; color: #0060A6; cursor: pointer; } 
     .metroPivot .content-categories div.last h4 { border-right: 0px; } 
     .metroPivot .content-categories div.current h4 a { color: #4F4F4F; cursor: default; } 

     .metroPivot .content-viewer { width: 20000px; clear: both; } 
     .metroPivot .content-viewer .master-slide { float: left; height: 123px; width: 928px; line-height: 123px; } 

     .metroPivot .content-viewer .master-slide .html-template { border-right: 1px solid #D3D3D3; float: left; height: 110px; width: 288px; padding: 0 10px; } 
     .metroPivot .content-viewer .master-slide .last { border-right: 0px; } 

     .metroPivot .content-listing { display: none; } 

     /* DELETE LATER - maybe 
     .metroPivot .content-listing .html-template .wrapper { width: 100%; } 
     .metroPivot .content-listing .html-template .wrapper a.image { float: left; text-decoration: none; padding-right: 10px; } 
     .metroPivot .content-listing .html-template .wrapper .content { float: left; width: 215px; } 
     .metroPivot .content-listing .html-template .wrapper .content a.title { display: block; text-decoration: none; } 

     .metroPivot .content-listing .image-template .wrapper { width: 100%; } 
     .metroPivot .content-listing .image-template .wrapper a { float:left; text-decoration: none; } 
     */ 
    </style> 

    <script type="text/javascript"> 

     var metroPivot = (function ($) { 
      var publicInstances = {}; 

      publicInstances.controller = controller; 
      function controller(clientId, options) { 

       var defaults = 
       { 
        templateType: 'html-template', 
        behavior: 'continuous-left' 
       }; 

       this.CSSCLASS_CURRENT = 'current'; 
       this.CSSCLASS_LAST = 'last'; 

       var self = this; 

       this.clientId = clientId; 
       this.context = $('#' + self.clientId); 

       this.header = $('.header', self.context); 
       this.category = $('.content-categories', self.context); 
       this.categories = self.category.children(); 
       this.viewer = $('.content-viewer', self.context); 
       this.viewerItems = self.viewer.children(); 
       this.list = $('.content-listing', self.context); 
       this.listItems = self.list.children(); 

       this.current = undefined; 
       this.previous = undefined; 

       this.isAnimating = false; 

       this.initialize = function() { 

        if (self.categories.length >= 1) 
         self.current = $('.' + self.CSSCLASS_CURRENT, self.category); 

        if (self.categories.length <= 1) 
         return; 

        if (options != undefined) 
         if (options.length > 0) 
          defaults = $.extend(defaults, options); 

        self.populateMaster(0, 0); 

        self.categories.each(function() { 
         $(this).click(self.categoryClicked); 
        }); 

        self.listItems.each(function() { 
         $(this).data('index', $(this).index()); 
        }); 
       }; 
       this.categoryClicked = function() { 

        var next = $(this); 
        if (next.hasClass(self.CSSCLASS_CURRENT)) 
         return; 

        if (self.isAnimating) 
         return; 

        self.isAnimating = true; 

        var previous = self.current; 
        next.toggleClass(self.CSSCLASS_CURRENT); 
        previous.toggleClass(self.CSSCLASS_CURRENT); 

        self.current = next; 
        self.previous = previous; 

        self.move(); 
       }; 
       this.populateMaster = function (masterIndex, categoryIndex) { 

        // TODO: the selectors need to work directly off of this objects properties. 
        masterIndex += 1; 
        var master = $(".master-slide:nth-child(" + masterIndex + ")", self.viewer); 
        var clones = $("[data-index=" + categoryIndex + "]", self.list).clone(); 

        master.empty(); 
        clones.css('display', 'block').appendTo(master); 
       }; 
       this.move = function() { 

        var categoryIndex = self.current.index(); 
        self.populateMaster(1, categoryIndex); 

        if(defaults.behavior == 'continuous-left') 
         self.animateContinuousLeft(); 
       }; 
       this.animateContinuousLeft = function() { 

        // TODO: the selectors need to work directly off of this objects properties. 
        var currentSlide = $('div.content-viewer div:first'); 
        if (currentSlide.length > 0) { 

         currentSlide.clone().appendTo('div.content-viewer'); 
         currentSlide.animate({ width: 'hide' }, function() { 
          $(this).remove(); 

          self.isAnimating = false; 
         }); 
        } 
       }; 

       self.initialize(); 
      }; 

      return publicInstances; 
     })(jQuery); 

     var instance = undefined; 

     $(document).ready(function() { 

      instance = new metroPivot.controller('myControl'); 
     }); 
    </script> 

</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 

    <div id="myControl" class="metroPivot"> 
     <div class="header"> 
      <h3> 
       Top Products 
      </h3> 
     </div> 
     <div class="content-categories"> 
      <div class="current"> 
       <h4> 
        <a>Most Popular</a> 
       </h4> 
      </div> 
      <div> 
       <h4> 
        <a>Windows</a> 
       </h4> 
      </div> 
      <div> 
       <h4> 
        <a>Office</a> 
       </h4> 
      </div> 
      <div> 
       <h4> 
        <a>Xbox</a> 
       </h4> 
      </div> 
      <div> 
       <h4> 
        <a>Windows Phone</a> 
       </h4> 
      </div> 
      <div> 
       <h4> 
        <a>Windows Live</a> 
       </h4> 
      </div> 
      <div> 
       <h4> 
        <a>Bing</a> 
       </h4> 
      </div> 
      <div class="last"> 
       <h4> 
        <a>Bada-Bing!</a> 
       </h4> 
      </div> 
     </div> 
     <div class="content-viewer"> 
      <div class="master-slide"> 
      </div> 
      <div class="master-slide"> 
      </div> 
     </div> 
     <div class="content-listing"> 
      <div data-index="0" class="html-template"> 
       Most Popular 
      </div> 
      <div data-index="0" class="html-template"> 
       Most Popular 
      </div> 
      <div data-index="0" class="html-template last"> 
       Most Popular 
      </div> 
      <div data-index="1" class="html-template"> 
       Windows 
      </div> 
      <div data-index="1" class="html-template"> 
       Windows 
      </div> 
      <div data-index="1" class="html-template last"> 
       Windows 
      </div> 
      <div data-index="2" class="html-template"> 
       Office 
      </div> 
      <div data-index="2" class="html-template"> 
       Office 
      </div> 
      <div data-index="2" class="html-template last"> 
       Office 
      </div> 
      <div data-index="3" class="html-template"> 
       Xbox 
      </div> 
      <div data-index="3" class="html-template"> 
       Xbox 
      </div> 
      <div data-index="3" class="html-template last"> 
       Xbox 
      </div> 
      <div data-index="4" class="html-template"> 
       Windows Phone 
      </div> 
      <div data-index="4" class="html-template"> 
       Windows Phone 
      </div> 
      <div data-index="4" class="html-template last"> 
       Windows Phone 
      </div> 
      <div data-index="5" class="html-template"> 
       Windows Live 
      </div> 
      <div data-index="5" class="html-template"> 
       Windows Live 
      </div> 
      <div data-index="5" class="html-template last"> 
       Windows Live 
      </div> 
      <div data-index="6" class="html-template"> 
       Bing 
      </div> 
      <div data-index="6" class="html-template"> 
       Bing 
      </div> 
      <div data-index="6" class="html-template last"> 
       Bing 
      </div> 
      <div data-index="7" class="html-template"> 
       Bada-Bing! 
      </div> 
      <div data-index="7" class="html-template"> 
       Bada-Bing! 
      </div> 
      <div data-index="7" class="html-template last"> 
       Bada-Bing! 
      </div> 
     </div> 
    </div> 

</asp:Content>

UPDATE：ここでは、以下の
すべては、元の質問の一部でした。最終的な解決策として、上記のコードを使用してください。

Here is a JS-FIDDLE of the code below.

ここではコードです：

<script src="Scripts/jQuery/Core/jquery-1.6.2.min.js" type="text/javascript"></script> 

<style type="text/css"> 

    /* This styling is assumed to come-in from a master set of CSS files */ 
    body, select { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; } 
    h3 { font-family: Segoe UI, Tahoma, Arial, Verdana, sans-serif; font-size: 11pt; font-weight: normal;} 
    h4 { font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif; font-size: 9pt; font-weight: normal;} 
</style> 

<style type="text/css"> 

    /* This is the styling for the control (itself) */ 
    .slideScroll-horizontal { border: 1px solid #D3D3D3; height: 270px; width: 960px; overflow: hidden; } 
    .slideScroll-horizontal .header { border-bottom: 1px solid; padding: 0px 0px 0px 15px; background-color: #FFFFFF; border-bottom-color: #D3D3D3; color: #4F4F4F; } 
    .slideScroll-horizontal .header h3 { font-size: 162.5%; margin-bottom: 10px; } 

    .slideScroll-horizontal .content-categories { width: auto; } 
    .slideScroll-horizontal .content-categories div { float: left; } 
    .slideScroll-horizontal .content-categories div.current 
    { 
     background-image: url(http://i.microsoft.com/global/en-us/homepage/PublishingImages/Sprites/white-carousel.png); 
     background-position: -55px -61px; 
     overflow: hidden; 
     background-repeat: no-repeat; 
    } 

    .slideScroll-horizontal .content-categories div h4 { width: 118px; float: left; text-align: center; font-size: 81.5%; border-right: 1px solid #4F4F4F; } 
    .slideScroll-horizontal .content-categories div h4 a { padding-top: 10px; color: #0060A6; cursor: pointer; } 
    .slideScroll-horizontal .content-categories div.last h4 { border-right: 0px; } 
    .slideScroll-horizontal .content-categories div.current h4 a { color: #4F4F4F; cursor: default; } 

    .slideScroll-horizontal .content-listing { width: 20000px; clear: both; padding: 0 10px; } 
    .slideScroll-horizontal .content-listing .html-template { border-right: 1px solid #D3D3D3; float: left; height: 145px; width: 300px; padding: 0 10px; } 

    /* DELETE LATER - maybe */ 
    .slideScroll-horizontal .content-listing .html-template { text-align: center; line-height: 145px; } 
</style> 

<script type="text/javascript"> 

    var slideScroll = (function ($) { 
     var publicInstances = {}; 

     publicInstances.controller = controller; 
     function controller(clientId, options) { 

      var defaults = {}; 

      this.CSSCLASS_CURRENT = 'current'; 
      this.CSSCLASS_LAST = 'last'; 

      var self = this; 

      this.clientId = clientId; 
      this.context = $('#' + self.clientId); 

      this.header = $('.header', self.context); 
      this.category = $('.content-categories', self.context); 
      this.categories = self.category.children(); 
      this.list = $('.content-listing:first', self.context); 
      this.listItems = self.list.children(); 

      this.current = undefined; 
      this.previous = undefined; 

      this.initialize = function() { 

       if (self.categories.length >= 1) 
        self.current = $('.' + self.CSSCLASS_CURRENT, self.category); 

       if (self.categories.length <= 1) 
        return; 

       if (options != undefined) 
        defaults = $.extend(defaults, options); 

       self.categories.each(function() { 
        $(this).click(self.categoryClicked); 
       }); 

       self.listItems.each(function() { 
        $(this).data('index', $(this).index()); 
       }); 
      }; 
      this.categoryClicked = function() { 

       var next = $(this); 
       if (next.hasClass(self.CSSCLASS_CURRENT)) 
        return; 

       var previous = self.current; 

       next.toggleClass(self.CSSCLASS_CURRENT); 
       previous.toggleClass(self.CSSCLASS_CURRENT); 

       self.current = next; 
       self.previous = previous; 

       if (self.categories.length <= 3) 
        return; 

       // TODO: check if animation even needs to happen 

       self.move(); 
      }; 
      this.move = function() { 
       self.animateLeftOnly(); 
      }; 

      this.animateLeftOnly = function() { 
       // Any help here is appreciated. 
      }; 

      self.initialize(); 
     }; 

     return publicInstances; 
    })(jQuery); 

    var instance = undefined; 

    $(document).ready(function() { 

     instance = new slideScroll.controller('myControl'); 
    }); 
</script>

のようにHTMLが見える：

<div id="myControl" class="slideScroll-horizontal"> 
     <div class="header"> 
      <h3> 
       Top Products 
      </h3> 
     </div> 
     <div class="content-categories"> 
      <div class="current"> 
       <h4> 
        <a>Most Popular</a> 
       </h4> 
      </div> 
      <div> 
       <h4> 
        <a>Windows</a> 
       </h4> 
      </div> 
      <div> 
       <h4> 
        <a>Office</a> 
       </h4> 
      </div> 
      <div> 
       <h4> 
        <a>Xbox</a> 
       </h4> 
      </div> 
      <div> 
       <h4> 
        <a>Windows Phone</a> 
       </h4> 
      </div> 
      <div> 
       <h4> 
        <a>Windows Live</a> 
       </h4> 
      </div> 
      <div> 
       <h4> 
        <a>Bing</a> 
       </h4> 
      </div> 
      <div class="last"> 
       <h4> 
        <a>Bada-Bing!</a> 
       </h4> 
      </div> 
     </div> 
     <div class="content-listing"> 
      <div data-index="0" class="html-template"> 
       one 
      </div> 
      <div data-index="1" class="html-template"> 
       two 
      </div> 
      <div data-index="2" class="html-template"> 
       three 
      </div> 
      <div data-index="3" class="html-template"> 
       four 
      </div> 
      <div data-index="4" class="html-template"> 
       five 
      </div> 
      <div data-index="5" class="html-template"> 
       six 
      </div> 
      <div data-index="6" class="html-template"> 
       seven 
      </div> 
      <div data-index="7" class="html-template"> 
       eight 
      </div> 
     </div> 
    </div>

前（哀れ）attempは、

this.animateLeftOnly = function() { 

       var categoryIndex = self.current.index(); 
       var targetSlide = $("[data-index=" + categoryIndex + "]", self.list); 
       var targetSlideIndex = targetSlide.index(); 

       var currentSlide = undefined; 
       for (var i = 0; i < targetSlideIndex; i++) { 

        currentSlide = $('div.content-listing div:first'); 
        currentSlide.animate({ width: 'hide' }, function() { 

         $(this).insertAfter('div.content-listing div:last', self.listItems); 
         $(this).removeAttr('style'); 
        }); 
       } 
       };

出典

2011-11-08 Prisoner ZERO

jsFiddleやデモのページを置くことはできますか？ – Sparky

JS-FIDDLE：http://jsfiddle.net/PrisonerZ3RO/28AfK/ –

[jQueryエンドレススライダ]（http://www.google.at/search?q=jQuery+endless+slider）の検索を試しましたか？ [jQuery Slideshow plugin]（http://www.google.at/search?q=jQuery+slideshow）の場合はどうしますか？そこにトンがあります、ほとんどはあなたが望むものを提供します。 – topek

私はので、私は完全に答えることができない会議に呼ばれるが、何がやりたいことは非常に単純ですされています：TS枚を見ました。最初の子をクローンし、最後に追加し、左にスライドさせ、最初の子を削除します。これは無限ループになります。私は何度もこれを作った。

<div class="content-categories"> 
    <div id="slider"> 
     <div class="current"> 
      <h4> 
       <a>Most Popular</a> 
      </h4> 
     </div> 
     <div> 
      <h4> 
       <a>Another</a> 
      </h4> 
     </div> 
     <div> 
      <h4> 
       <a>last one</a> 
      </h4> 
     </div> 
    </div> 
</div>

あなたのCSSはこの

.content-categories{ 
    width:300px; 
    height:300px; 
    position:relative; 
    overflow:hidden; 
} 
.content-categories div{ 
    float:left; 
    width:300px; 
    height:300px; 
} 
#slider{ 
    width:900px; 
    position:absolute; 
    left:0; 
}

その後

あなたのクリックアクションのようなものになるだろうここであなたが始めるために何かがあります

...（あなたがイメージを持っていたと仮定したりして矢印または何かidはleftと呼ばれています）

したがって、最初の子をクローンし、クローンされた要素を削除し、左の位置をゼロに戻します。それはシームレスでなければなりません...今実行する必要があります。助けてくれるといいですか？

出典

2011-11-08 21:47:28

明らかにあなたは彼のjsFiddleを見ませんでした。彼はすでにコードを持っています...それは微調整する必要があるかもしれませんが、確かにゼロから書き直す必要はありません。 – Sparky

ええ、コメントがある前にこの質問に答えていました。「新しい回答を読み込む」ポップアップは、コメントではなく回答に対してのみ表示されます。それほど一般的な概念は同じではありません。 –

助けてくれてありがとう。 –

答えて

関連する問題