个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
这是我尝试复制我拥有的代码。由于某种原因，代码在 jsfiddle 中完美运行，但在我自己的网站上出现故障。也许有人可以以某种方式找出问题所在。
http://jsfiddle.net/neowot/g0teoyrc/
就像我说的，它在 jsfiddle 中运行良好，但在我的实际网站中，单击按钮会使 Div2 立即消失，然后在开始淡入淡出动画之前立即再次出现。显然这看起来非常糟糕和奇怪。
有人知道可能会发生什么吗？
HTML
<body>
<section id="wrapper">
<div id="button">B</div>
<div id="Div1">Div1</div>
<div id="Div2">Div2</div>
</section>
</body>
CSS
#wrapper{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#Div1{
height:400px;
width:1000px;
position:relative;
float:left;
background:blue;
}
#Div2{
height:400px;
width:380px;
position:absolute;
top:20;
background:green;
display:none;
margin-left:380px;
}
#button{
width:20px;
height:20px;
background:orange;
cursor:pointer;
}
JS
$('#button').click(function() {
$('#Div2').fadeToggle(300);
var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px";
$('#Div1').animate( {'width': toggleWidth}, 300);
});
最佳答案
对我来说就像 fiddle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery animate </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
#wrapper{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#Div1{
height:400px;
width:1000px;
position:relative;
float:left;
background:blue;
}
#Div2{
height:400px;
width:380px;
position:absolute;
top:20;
background:green;
display:none;
margin-left:380px;
}
#button{
width:20px;
height:20px;
background:orange;
cursor:pointer;
}
</style>
<body>
<section id="wrapper">
<div id="button">B</div>
<div id="Div1">Div1</div>
<div id="Div2">Div2</div>
</section>
<script>
$(document).ready(function(){
$('#button').click(function() {
$('#Div2').fadeToggle(300);
var toggleWidth = $("#Div1").width() == 380 ? "1000px" : "380px";
$('#Div1').animate( {'width': toggleWidth}, 300);
});
});
</script>
</body>
</html>
关于javascript - fadeToggle 动画宽度出现故障？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30279641/
25
4
0
我的 fiddle : http://jsfiddle.net/tmanundercover/62ap2/CSS #targetedDiv, #otherDiv { border: 1px s
这是我尝试复制我拥有的代码。由于某种原因，代码在 jsfiddle 中完美运行，但在我自己的网站上出现故障。也许有人可以以某种方式找出问题所在。 http://jsfiddle.net/neowot/
我正在尝试让淡入淡出切换正常工作。当您单击(+)二时，它应该显示两个链接并更改为(-)二，当您再次按下时，它会关闭这些链接并返回到(+)二。现在，当您按下切换开关时，我无法发生任何事情。 An
我在列表中嵌套列表，并且当用户单击相应的主题时我尝试切换子列表。然而，发生的情况是，用户可以单击子列表上的任意位置来关闭子列表，这将使链接无法访问。 (我知道现在子列表中没有链接)。你能帮我解决这个问
这是我的代码: $('#retouche_a_faire').click(function() { $("#retouche_a_faire_alert").toggle(this.checked);
我有一个 jquery 函数，可以使用 fadeToggle 切换两个 div。 $(".container .readmore").click(function() { $
我想使用 jQuery 的 fadeToggle() 函数。 我有一个隐藏的 div，当我单击链接时，我想调用 fadeToggle() 使 div 淡入，并在再次单击后淡出。 线索是，我想在使用我自
大家好，我想学习如何为我的 使用 jquery fadeToggle DEMO 在此演示中，您可以看到有一个click show div div。当您单击此 div 时，将显示 .gelen-mesa
这是 Firefox 独有的问题。这在 Chrome 和 Internet Explorer 上运行良好。 如果表格行上有 background-color，然后使用 fadeToggle 隐藏该行，
当我切换下拉菜单时，整个列表会展开。我一直在想办法只扩展选定的列表，但不知道问题出在哪里。 JSFiddle http://jsfiddle.net/Cx4CK/6/ HTML Applicatio
我正在使用 jQuery 中的 fadeToggle 方法创建响应式菜单。当屏幕上的宽度小于 767px 时，屏幕上应该会出现一个按钮。当您按下此按钮时，应该会显示一个菜单。但我的问题是菜单从一开始就
我正在尝试让 #hi 淡出。现在，褪色没有发生。 div 就这样消失了。 setTimeout(function() { $('.project-link-1').css('visibili
我无法让 fadeToggle 正常工作。我用它来在单击另一个 div 时显示文本。这是为了用于多个元素，所以我希望可以有一种优雅而有效的方式来处理所有这些元素。 这是我目前拥有的 - 它不起作用(我
我目前正在使用 jQuery("#addCaseMemberBtn").fadeToggle( "fast"); 但它导致内容在完成时向上/向下跳动，因为它正在使用 display 。我怎样才能告诉它
你看，我使用 if else 来实现该目标，但它不起作用。我想我可能会犯一些错误。这些代码来自W3Schools，我把它改成了这个样子。 $(document).ready(function() {
如果检测到 Canvas 外单击或按下 esc 按钮，我希望能够重新激活 fadeToggle 以关闭。 http://jsfiddle.net/sj6kdyLk/ $("#name").click(
我正在尝试淡入 div 元素，但由于某种原因，每次我预览脚本代码时，它只是显示它而不运行它 我的脚本代码是 - $("#t").click(function() { $("#b.").fadeTo
我有一个 div，其内容由 $.post() 异步检索。检索到的内容是多个图像，每个图像都有单独的 ID。我希望每个图像在悬停时淡入淡出() 所以我在我的 php 中当场计算图像 id，生成图像并添加
我正在尝试创建一个抽屉导航，单击时会淡出/淡入。在 jQuery 代码中，我使导航在加载时隐藏，当我单击汉堡图标时，它会淡入。但是，当我再次单击它时，它不会淡出。 我之前在“点击”功能上遇到过类似的问
我在网上找到了一个脚本，可以根据单选按钮的点击来显示或隐藏 div。 我试图通过在过渡中添加 fadeToggle() 或 slipToggle() 来改进这一点。然而，当我这样做时，该功能不再像以前
我是一名优秀的程序员,十分优秀！