javascript - fadeToggle 动画宽度出现故障？-6ren

javascript - fadeToggle 动画宽度出现故障？

转载作者：行者123 更新时间：2023-12-03 10:07:56

24

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/

24

4

0

文章推荐： go - 观察 pod 状态的所有变化

文章推荐： string - 如何通过正则表达式匹配 3 和 4 字节 UTF-8

文章推荐： asp.net - Visual Studio "Add As Link"在调试时不起作用

JavaScript 故障
有人可以解释一下为什么这个脚本不起作用吗？ function destroy(ID) { if (confirm("Deleting is a very bad thing! Sure?")
wcf - Silverlight 故障
我正在尝试使 WCF Silverlight 故障按此方式工作: MSDN aricle 将 SL 故障添加到我的 Web.config 文件后，我收到以下警告: The element 'behav
Haskell mod 故障？
这是我要删除的 Haskell 函数 2::Int和 5::Int从列表中: remPrimesFactors25 :: [Int] -> [Int] remPrimesFactors25 [] =
FFmpeg DTS 故障
当我想用 ffmpeg 连接和录制两个 mp4 视频时，我遇到了这个问题。我得到的输出是: [concat @ 0x2566e80] DTS 4079 #0:0 (h264 (native) ->
delphi - SetCursorPos 故障？
我想在delphi中编写一个程序来模拟以特定速度移动的鼠标指针(类似于AutoIT MouseMove函数)。要么是我的代码错误，要么是 SetCursorPos 在被调用太多次后出现故障。这是我的功
JavaScript 故障，无法正确重定向
我将“wa、or 和 id”(来自这些州的访问者)设置为重定向到 website1.com - 当我访问该网站时，它会将我重定向到 website1.com(因此它知道我在 WA) 。但如果我将 wa
WCF - 故障/异常与消息
我们目前正在争论通过 WCF channel 抛出错误与传递指示状态或服务响应的消息是否更好。故障带有 WCF 的内置支持，您可以使用内置的错误处理程序并做出相应的 react 。然而，这会带来开销
r - c() 故障？
不确定我在这里做错了什么，如果有任何帮助，我们将不胜感激。尝试创建一个名为“control”的新变量，并在行变量等于这些数字时将其编码为 1，否则编码为 0。 data$control= ifels
.net - 遥测采样而不影响错误/故障
我想在应用洞察中记录成功调用的百分比。我看到这篇文章https://learn.microsoft.com/en-us/azure/azure-monitor/app/sampling我认为固定速率采
python - 如何区分Python或Matlab是否错误/故障？
我正在尝试使用 SVD 和特征分解来使用动态模式分解进行一些数据分析。我遇到了一个简单的问题，即从 Matlab 和 Python 获得不同的结果。我很困惑，不知道为什么 Python 给我错误的结果
php - 我迫切需要帮助来排除mysqli_error()故障。
This question already has an answer here: mysqli_fetch_assoc() expects parameter / Call to a member
c - 结构链接表分段-故障
我刚刚开始我的一个实验室，在那里我计算类(class)的 GPA，其信息存储在结构的链接列表中。截至目前，我正在尝试打印所有类(class)信息，以确保它们已正确初始化并添加到链接列表中。我遇到了一
c++ - GetWindowText 故障
我正在尝试学习如何使用 visual studio 为 C++ 制作 GUI。但是我在使用 GetWindowText() 函数时遇到了一些问题。它不会将 LPTSTR 标题更改为文本框中的文本，并且
ios - NSNumberFormatter 故障
我有一个奇怪的问题。它似乎只出现在测试者的 iPhone 5s 上。它可以在运行最新 iOS (8.3) 的 iPhone 5、6 和 6 plus 上正常运行。这是代码 -(NSString *)
ios - 更新核心数据记录<故障>
我正在尝试更新 Core Data 中的一些记录。我正在采取以下步骤来完成它带谓词的获取函数从核心数据中检索记录将结果集存储在对象数组中遍历数组并更新每条记录调用保存上下文我遇到了两个问题
iphone - viewWithTag 故障。
我通过 Storyboard设计了 tableView，在一个单元格中我有一个按钮和一个标签。按钮在 Storyboard上有标签 1 和标签在 Storyboard上有标签 2。在 cellForR
ios - textFieldShouldEndEditing 故障？
我实现了这个方法，当在文本字段中输入了未经授权的字符或已使用的用户名时，向用户发送多个警报 View : func textFieldShouldEndEditing(textField: UITex
C++ Rnd() 故障
伙计们，我在运行程序时遇到了这个非常奇怪的错误。这是重要的代码: 变量(编辑): const short int maxX = 100; const short int maxZ = 100; con
JavaScript 错误/故障？
我有这个修改过的 Matrix Javascript 代码，我想摆脱第一次运行的所有与自身重叠的字符串。有人知道我该如何管理吗？另外，我想在我的网页上多次使用此代码，我需要声明新变量，不是吗？但是当我
c# - COMException 故障
有谁知道是否有网站(甚至非 Microsoft)有关于 COMExceptions/HRESULTS 的详细信息。当我尝试在使用 Copy() 函数后保存我的 Excel 工作簿时，我收到此错误:

首页

博学

6Ren·AI

商城

javascript - fadeToggle 动画宽度出现故障？