反向CSS3轉換

http://micheresources.com/html/j-crew-slider/反向CSS3轉換

我想知道如何反轉動畫？當您將鼠標懸停在左側的每個導航項上時，您會注意到當您將鼠標懸停在下一個項目上時，黑色條只是捏到左上角而不是向左滑動。我怎樣才能讓它滑出來與滑入的方式相似？

當在懸停時應用activeSlide類時，黑條是附加到每個導航項的<a>標記，然後在下一個懸停時移除該標記。

的jQuery：

$(document).ready(function() { 
    function activateItem(index) { 
     $('#slideshow-nav').children('li').each(function (i) { 
      var $item = $(this); 
      if (i == index) { 
       if ($item.children('a').length == 0) { 
        $item.append('<a href="#">' + titles[i] + '</a>'); 
       } 
      } else { 
       $item.children('a').hide(400, function() { 
        $item.children('a').remove(); 
       }); 
      } 
     }); 
    } 

    var titles = ["New Styles", "June PVE", "Double Hostess Rewards"]; 
    $("#slideshow").before("<ul id='slideshow-nav'></ul>") 
    .cycle({ 
     fx:   "scrollVert", 
     rev:   "scrollVert", 
     speed:   600, 
     timeout:  0, 
     pagerEvent:  "mouseover", 
     pager:   "#slideshow-nav", 
     pagerAnchorBuilder: function (index) { 
      return "<li><span>" + titles[index] + "</span></li>"; 
     }, 
     onPagerEvent: function (index) { 
      activateItem(index); 
     } 
    }); 
    activateItem(0); 
});

CSS：

#slideshow-nav li a { 
    background-color: #000; 
    width: 285px; 
    margin-top: -1px; 
    padding: 30px 10px; 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #000; 
    color: #fff; 
    text-decoration: none; 
    position: absolute; 
    left: -285px; 
    -webkit-transition: left 500ms ease; 
    -moz-transition: left 500ms ease; 
    -o-transition: left 500ms ease; 
    transition: left 500ms ease; 
} 
    #slideshow-nav li.activeSlide a { left: 0; }

來源

2013-06-12 Elli Petersen

發佈設置'activeSlide'的代碼。 –

'activeSlide'是jQuery Cycle插件的一部分。它應用於當前幻燈片的相應導航項目。 –

那麼我不知道該怎麼告訴你。試着不用這個插件，它可能會以破壞CSS轉換的方式靜靜地修改DOM。這正是過時的jQuery插件真的很糟糕的原因。您應該能夠在滾動照片查看器上使用與菜單上的黑色滑塊相似的CSS邏輯。 –

請參見下面的代碼最重要的一點，我覺得你只需要定時添加到.remove()

Working Example

$(document).ready(function() { 
    function activateItem(index) { 
     $('#slideshow-nav').children('li').each(function (i) { 
      var $item = $(this); 
      if (i == index) { 
       if ($item.children('a').length === 0) { 
        $item.append('<a href="#">' + titles[i] + '</a>'); 
       } 
      } else { 
        $item.children('a').remove('slow'); // <-----Important bit 
      } 
     }); 
    } 

    var titles = ["New Styles", "June PVE", "Double Hostess Rewards"]; 
    $("#slideshow").before("<ul id='slideshow-nav'></ul>") 
    .cycle({ 
     fx:   "scrollVert", 
     rev:   "scrollVert", 
     speed:   600, 
     timeout:  0, 
     pagerEvent:  "mouseover", 
     pager:   "#slideshow-nav", 
     pagerAnchorBuilder: function (index) { 
      return "<li><span>" + titles[index] + "</span></li>"; 
     }, 
     onPagerEvent: function (index) { 
      activateItem(index); 
     } 
    }); 
    activateItem(0); 
});

來源

2013-06-12 21:47:29 apaul

D'oh，太簡單了......太棒了，謝謝。 –

@Eli它發生在我們身上。 – apaul

回答

相關問題