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 个答案: