滑块切换可在jsfiddle中使用，但不能实时使用

Question

作为标题，我制作了一个可以在Jsfiddle预览中使用但不能实时使用的滑块。

这是小提琴的链接： 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的小提琴示例，它对我有用。

我唯一修改的是

  <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中使用，但不能实时使用

问题描述

2 个解决方案

解决方案1
0 2015-05-05 02:46:23

解决方案2
0 已采纳 2015-05-05 02:50:11

滑块切换可在jsfiddle中使用，但不能实时使用

问题描述

2 个解决方案

解决方案1 0 2015-05-05 02:46:23

解决方案2 0 已采纳 2015-05-05 02:50:11

解决方案1
0 2015-05-05 02:46:23

解决方案2
0 已采纳 2015-05-05 02:50:11