Question

我尝试使用两个位于彼此顶部的div来创建一个选择状态。一个位于相对位置，一个位于底部位置-200px。单击相对div时，绝对定位的div将滑入＆＃34;成功＆＃34;的消息。

我现在有这个工作，但我需要通过取消＆＃34;成功＆＃34; div，如果用户决定他们想要更改他们的选择。现在，当我点击一个div时，所有的div显示＆＃34;成功＆＃34;州。我想在不触及html / css的情况下解决这个问题。

 $(document).ready(function(){
  $('.main-div').click(function(){
    $('.inner-div').animate({
    bottom: "0px"
    }, 300 );
  });
});

谢谢！

Answer 1

我认为这就是你想要的：

$(document).ready(function(){
  $('.main-div').click(function(){
    $('.inner-div').stop().animate({
    bottom: "-100px"
    }, 300 );
    $(this).find('.inner-div').stop().animate({
    bottom: "0px"
    }, 300 );
  });
});

http://jsfiddle.net/LSan3/3/

因此，在点击功能中，我们首先会隐藏所有＆＃39; inner-divs＆＃39;然后找到并展示一个相对于这个＆＃39; - ＆＃39;这个＆＃39;成为＆＃39; main-div＆＃39;点击了。

请告诉我这是否是您想要实现的目标。

编辑另请注意我添加了.stop（），如果用户点击了＆＃39; main-div，则会确保您的动画不会重复多次。迅速

Answer 2

尝试：

$(document).ready(function () {
    $('.main-div').click(function () {
        $('.inner-div').animate({
            bottom: "-100px"
        }, 0);
        $(this).find('.inner-div').animate({
            bottom: "0px"
        }, 300);
    });
});

jsFiddle example

Answer 3

  try the code given below:


  $(document).ready(function(){
   $('.main-div').click(function(){
  $('.inner-div').animate({bottom: "-1-0px"}, 300 );

   $(this).find('.inner-div').animate({
    bottom: "0px"
   }, 300 );
 });
});

我认为这可能对你有所帮助。

在JQuery中选择具有相同类的特定元素

3 个答案: