Question

我有一个现有的切换开关，可以按我的需要工作，但是我希望它在过渡时可以淡入淡出。我该如何添加到现有代码中呢？这是我当前的代码：

    $('#toggle > div').click(function() {
    var producttoggle = $(this).index();
    
    $('#left').toggle(producttoggle === 0 );
    $('#right').toggle(producttoggle === 1 );
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle">
        <div id="left">left
            <!--  left content block -->
        </div>
        <div id="right">right
            <!--  right content block -->
        </div>
    </div>

非常感谢您！

Answer 1

使用 .fadeToggle() 代替 .toggle() ，而不是通过测试作为参数（{{1}的使用不正确}），将其设置为toggle()语句。

此外（FYI），JQuery团队建议使用 .on() 进行事件绑定，而不是使用诸如if/else之类的较早的快捷方式。

.click()

$('#toggle > div').on("click", function() {
  // Change the following 1 to a 0 if you want to reverse which element fades
  if($(this).index() === 1){
    $('#left').fadeToggle();
  } else {
    $('#right').fadeToggle();
  }
});

div > div {  width:50%; cursor:pointer; }
#left { float:left; background-color:#ff0; }
#right { float:right; background-color:#0ff; }

Answer 2

您要做的是在CSS代码中创建一个关键帧，然后使您的切换按钮向所需的元素添加动画样式。见下文：

it('has new behaviour from result of set state', () => {
  let component = mount(<Component />);

  requests.pop().respond(200);

  component.update() // fetch() has not responded yet and
                     // thus setState has not been called yet
                     // so does nothing

  assertNewBehaviour(); // fails

  // now setState occurs after fetch() responds sometime after
});

反向进行此操作以制作fadeOut动画。然后，使用JS添加以下代码（对不起，我不知道jQuery）：

@keyframes fadeIn {
    0% {opacity: 1;}
    10% {opacity: 0.9;}
    20% {opacity: 0.8;}
    30% {opacity: 0.7;}
    40% {opacity: 0.6;}
    50% {opacity: 0.5;}
    60% {opacity: 0.4;}
    70% {opacity: 0.3;}
    80% {opacity: 0.2;}
    90% {opacity: 0.1;}
    100% {opacity: 0;}
}

使用if语句执行此代码，然后使用JS进行计数器更新页面并执行动画。简单！

淡入JS Toggle

2 个答案: