内联幻灯片效果使用JQuery UI

Inline slide effect using JQuery UI

本文关键字：JQuery UI 幻灯片      更新时间：2023-09-26

我试图隐藏一个使用幻灯片函数内联显示的警报。它是内联显示的，但滑动并不像我想的那样内联发生。如何使滑动发生内联?

下面是当前代码 的代码片段

$("#testDiv2").show();
$("#testDiv2").on('click', function () {
$("#testDiv2").hide('slide',{direction: 'left'}, 6000);
});
$(function() {
    if ($("#testDiv2").is(':visible')) 
     $("#testDiv2").css('display','inline-block'); 
});
#test,#testDiv,#testDiv2 { 
    display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="test">
A
<div id="testDiv2">
    <div id="testDiv" class="alert alert-success">Click to close</div>
</div>
B
</div>

相关文章:

  • 我看过这篇文章，建议改成inline-block这并不能解决问题。
    • 这个自我回答的问题是类似于我的，但它是关于显示下一个内联不是

嗯，我发现这段代码将为您解决内联问题，但仍然存在一些布局问题。我正在努力。

#test > div.ui-effects-wrapper {
   display: inline-block !important;
}


$("#testDiv2").show();
$("#testDiv2").on('click', function() {
  $("#testDiv2").hide('slide', {
    direction: 'left'
  }, 6000);
});
$(function() {
  if ($("#testDiv2").is(':visible'))
    $("#testDiv2").css('display', 'inline-block');
});
#test,
#testDiv,
#testDiv2 {
  display: inline-block;
}
#test > div.ui-effects-wrapper {
  display: inline-block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="test">
  A
  <div id="testDiv2">
    <div id="testDiv" class="alert alert-success">Click to close</div>
  </div>
  B
</div>

相关文章：