反向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

回答

相关问题