Question

在使用jquery无法正常工作后，

addClass。

当我点击按钮时，我试图从下往上显示横幅，当用户再次点击时，它将返回到底部并隐藏起来。

下面是我到目前为止的代码。第一部分有效，但第二部分没有下滑......反而简单地消失了。

感谢任何帮助。

谢谢！

＆＃13;

$(document).ready(function() {

  $("#projs").click(function() {
    if ($("#projList").hasClass('hideAway')) {
      $("#projList").removeClass('hideAway').animate({
        bottom: '25%'
      });
    } else {
      $("#projList").animate({
        bottom: '0'
      }).addClass('hideAway'); //.addClass('hideAway');
    }

  });


});

＆＃13;

.hideAway {
  visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="projs" value="Some Projects" style="border:none;border: 2px solid #e7e7e7;"></input>
<div id="projList" style="width:100%;position:absolute;bottom:0;" class="hideAway">
  <table style="margin:0px;width:100%;padding:0px;">
    <tr>
      <td bgcolor="#EA664A" align="center" height="75" width="75">
      </td>
      <td bgcolor="#D8B90C" align="center" height="75" width="75">
      </td>
    </tr>
    <tr>
      <td bgcolor="#0CD836" align="center" height="75" width="75">
      </td>
      <td bgcolor="#1AD8E3" align="center" height="75" width="75">
      </td>
    </tr>
  </table>
</div>

＆＃13;

jsfiddle link

Answer 1

完成动画后必须添加课程。

$("#projList").animate({bottom:'0%'},function(){$(this).addClass('hideAway')})

$(document).ready(function(){
  $("#projs").click(function(){
    if($("#projList").hasClass('hideAway')) 
      $("#projList").removeClass('hideAway').animate({bottom: '20%'});
    else
      $("#projList").animate({bottom:'0%'},function(){$(this).addClass('hideAway')})
  });
});

.hideAway {
    visibility:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="button" id="projs" value="Some Projects" style="border:none;border: 2px solid #e7e7e7;"></input>
<div id="projList" style="width:100%;position:absolute;bottom:0;" class="hideAway"> 
  <table style="margin:0px;width:100%;padding:0px;">
    <tr>
      <td bgcolor="#EA664A" align="center" height="75" width="75"></td>
      <td bgcolor="#D8B90C" align="center" height="75" width="75"></td>
    </tr>
    <tr>
      <td bgcolor="#0CD836" align="center" height="75" width="75"></td>
      <td bgcolor="#1AD8E3" align="center" height="75" width="75"></td>
    </tr>
  </table>    
</div>

注意：使用整页查看结果。

Answer 2

这是因为即使您链接了事件，它们也不会同步执行。 jQuery在一个“线程”中启动动画，在另一个“线程”中设置hiddenAway类。所以动画被覆盖了。要解决这个问题，只需添加一个延迟。

$(document).ready(function() {

    $("#projs").click(function() {
        if ($("#projList").hasClass('hideAway')) {
            $("#projList").removeClass('hideAway').animate({
                bottom: '25%'
            });
        } else {
            $("#projList").animate({
                bottom: '0'
            })
            setTimeout(function() {
                $("#projList").addClass('hideAway');
            }, 300) //.addClass('hideAway');
        }

    });
});

**编辑：**

Ehsan的回答可能更合适，所以你不需要知道动画时间。他的回答是提供一个回调函数，jQuery将在动画完成后应用。这是一个完整的功能：

$(document).ready(function() {

    $("#projs").click(function() {
        if ($("#projList").hasClass('hideAway')) {
            $("#projList").removeClass('hideAway').animate({
                bottom: '25%'
            });
        } else {
            $("#projList").animate(
                {
                    bottom: '0'
                },
                function() {
                    $("#projList").addClass('hideAway');
                }
            );
        }

    });

});

Answer 3

您可以为此目的使用animate的回调函数

＆＃13;

	$(document).ready(function() {
	  $("#projs").click(function() {
	    if ($("#projList").hasClass('hideAway')) {
	      $("#projList").removeClass('hideAway').animate({
	        bottom: '25%'
	      });
	    } 
      else {
	      $('#projList').animate({
	        bottom: "0%"
	      }, 800, function() {
	        $(this).addClass('hideAway');
	      });
	    }
	  });
	});

＆＃13;

.hideAway {
    visibility:hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="projs" value="Some Projects" style="border:none;border: 2px solid #e7e7e7;"></input>
<div id="projList" style="width:100%;position:absolute;bottom:0;" class="hideAway">
  <table style="margin:0px;width:100%;padding:0px;">
    <tr>
      <td bgcolor="#EA664A" align="center" height="75" width="75">
      </td>
      <td bgcolor="#D8B90C" align="center" height="75" width="75">
      </td>
    </tr>
    <tr>
      <td bgcolor="#0CD836" align="center" height="75" width="75">
      </td>
      <td bgcolor="#1AD8E3" align="center" height="75" width="75">
      </td>
    </tr>
  </table>
</div>

＆＃13;

Answer 4

您可以通过以下方式实现代码最小化：

$(document).ready(function() {
  $("#projs").click(function() {
    $("#projList").slideToggle().css("bottom", "25%").toggleClass("hideAway");
  });
});

.hideAway {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="projs" value="Some Projects" style="border:none;border: 2px solid #e7e7e7;"></input>
<div id="projList" style="width:100%;position:absolute;bottom:0;" class="hideAway">
  <table style="margin:0px;width:100%;padding:0px;">
    <tr>
      <td bgcolor="#EA664A" align="center" height="75" width="75">
      </td>
      <td bgcolor="#D8B90C" align="center" height="75" width="75">
      </td>
    </tr>
    <tr>
      <td bgcolor="#0CD836" align="center" height="75" width="75">
      </td>
      <td bgcolor="#1AD8E3" align="center" height="75" width="75">
      </td>
    </tr>
  </table>
</div>

Answer 5

它没有按预期工作，因为后面链接的函数在执行之前不会等待。它们都是一起执行的，不要等到上一个函数完成执行。

您可以使用.animate中的回调功能。

The last parameter of jQuery's .animate is the callback function

回调函数将在父函数完成执行后执行。

jsFiddle here

$(document).ready(function() {

  $("#projs").click(function() {
    if ($("#projList").hasClass('hideAway')) {
      $("#projList").removeClass('hideAway').animate({
        bottom: '25%'
      });
    } else {
      $("#projList").animate({bottom: '0'}, function(){
        $(this).addClass('hideAway');
      });
    }

  });


});

.hideAway {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="projs" value="Some Projects" style="border:none;border: 2px solid #e7e7e7;"></input>
<div id="projList" style="width:100%;position:absolute;bottom:0;" class="hideAway">
  <table style="margin:0px;width:100%;padding:0px;">
    <tr>
      <td bgcolor="#EA664A" align="center" height="75" width="75">
      </td>
      <td bgcolor="#D8B90C" align="center" height="75" width="75">
      </td>
    </tr>
    <tr>
      <td bgcolor="#0CD836" align="center" height="75" width="75">
      </td>
      <td bgcolor="#1AD8E3" align="center" height="75" width="75">
      </td>
    </tr>
  </table>
</div>

动画不能使用jquery后的addClass

5 个答案: