滑块切换在 jsfiddle 中有效但无效

Question

如标题所述，我制作了一个可在 Jsfiddle 预览中使用但无法实时使用的滑块。

这里是 link 到 fiddle: http://jsfiddle.net/kits87/99tz8w2c/16/

这是我放在网站上的 javascript：

$(document).ready(function() {

var $div1 = $('#work'),
    $div2 = $('#play'),
    currentDiv = 'play',
    $button = $('button');

$div2.hide();
$button.text('Recent ' + currentDiv);

$(document).on('click', 'button', function (evt) {
    $div1.toggle('fade', 'fast');
    $div2.toggle('fade', 'fast');

    currentDiv = (currentDiv === 'play') ? 'work' : 'play';
    $button.text('Recent ' + currentDiv);
});
});

这里是 HTML

<div class="SlideContain">
        <div id="work">
            <div id="desc">Description of work here</div>
            <div id="image">image of work here</div>
        </div>
        <div id="play">
            <div id="desc">Description of work here</div>
            <div id="image">image of work here</div>
        </div>
        <div class="clear"></div>
    </div><br />
    <button>Toggle</button>

它断断续续地切换一次，然后按钮切换但不触发动画。我错过了什么？

Answer 1

您可能缺少 jQuery UI 1.9.2 库。

我在你的演示中排除了 jquery-ui 库，它开始像你描述的那样工作：https://jsfiddle.net/99tz8w2c/17/

Answer 2

复制 OP 的 fiddle 示例如下，对我有用。

我只修改了来自

  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>

到

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> 


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Slider - jsFiddle demo by kits87</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> 
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    #div1 {
    width: 100%;
    height: 100px;
    background-color:#333333;
    position: absolute;
    top: 0px;
    left: 0px;
}
#div2 {
    width: 100%;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
}
#desc {
    width:50%;
    height:auto;
    float:left;
    padding:0;
    background-color:#666666;
    position:relative;
    left:0px;
    top:0px;
}
#image {
    width:50%;
    height:auto;
    float:right;
    padding:0px;
    background-color:#655555;
}
.clear {
    clear: both;
}
.container {
    width: 100%;
    position: relative;
    left: 0px;
    height: 100px;
}
@media screen and (max-width:360px) {
    #desc {
        width:100%;
        height:50px;
    }
    #image {
        width:100%;
        height:50px;
    }
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(function(){
var $div1 = $('#div1'),
    $div2 = $('#div2'),
    currentDiv = 'play',
    $button = $('button');

$div2.hide();
$button.text('Recent ' + currentDiv);

$(document).on('click', 'button', function (evt) {
    $div1.toggle('fade', 'fast');
    $div2.toggle('fade', 'fast');

    currentDiv = (currentDiv === 'play') ? 'work' : 'play';
    $button.text('Recent ' + currentDiv);
});
});//]]>  

</script>


</head>
<body>
  <body>
    <p>Header here</p>
    <div class="container">
        <div id="div1">
            <div id="desc">Description of work here</div>
            <div id="image">image of work here</div>
        </div>
        <div id="div2"></div>
        <div class="clear"></div>
    </div><br />
    <button>Toggle</button>
</body>

</body>


</html>

滑块切换在 jsfiddle 中有效但无效

Slider toggle works in jsfiddle but not live

javascript

jquery

slider

slidetoggle

jsfiddle