当我将它与 Jquery.smoothState.js 组合时,BXslider.js 被破坏了。我该如何解决?
BXslider.js is broken when I combine it with Jquery.smoothState.js. How do I fix this?
我使用 BXslider.js 创建了一个带有 fullscreen-image 滑块的主页。滑块中的每个图像都有一个带有锚 link 的标题文本。
点击锚点 link 后,您将转到一个详细信息页面。如果您从主页移动到详细信息页面,则会出现一个过渡。这与 jquery.smoothstate.js 页面上的演示基本相同。
我遇到一个问题,BXslider 在包含 jquery.smoothstate javascript 后坏了。每次您在 BXslider 中按下箭头按钮 prev 或 next 时,滑块本身都会覆盖自身并复制 prev/next 按钮,图像将消失。在 firebug 中,我没有收到任何警告或错误。这使得调试变得困难。希望有人能帮我解决这个问题。
提前致谢!
下面是我为我的 bxslider 编写的代码。js/smootstate 网站。
主页代码
<div id="main" class="m-scene">
<div class="scene-element scene-element--fadeinup">
<section id="banner">
<div class="inner">
<div id="box">
<div class="relative-box">
<div class="logo"></div>
<h2>Client-name</h2>
<div id="captions">
<p>" This is a caption "</p>
</div>
</div>
<a href="/generic.html" class="more">To genericpage</a>
</div>
<ul class="bxslider">
<li style="background-image: url('/images/pic1.jpg');"></li>
<li style="background-image: url('/images/pic2.jpg');"></li>
<li style="background-image: url('/images/pic3');"></li>
<li style="background-image: url('/images/pic4.jpg');"></li>
<li style="background-image: url('/images/pic5.jpg');"></li>
</ul>
</div>
</section>
</div>
</div>
</div>
通用 html/css 选择器
我正在为 jquery.smootstate.js 使用通用 html/selectors。下面 html 与主页和详情页相同。
<div id="main" class="m-scene">
<div class="scene-element scene-element--fadeinup">
css3 转换
scene-element & scene-element--fadeinup 选择器用于 css3 页面动画。
@keyframes fadeInUp{
0%{opacity:0; transform:translate3d(0,100%,0);}
100%{opacity:1;transform:none;}
}
.m-scene .scene-element{
animation-duration: 0.25s;
transition-timing-function: ease-in;
animtation-fill-mode: both;
}
.m-scene .scene-element--fadeinup {animation-name:fadeInUp;}
.m-scene.is-exiting .scene-element {animation-direction: alternate-reverse;}
javascript for jquery.smoothstate.js
(function($) {
'use strict';
var $body = $('html, body'),
content = $('#smooth').smoothState({
// Runs when a link has been activated
onStart: {
duration: 250, // Duration of our animation
render: function (url, $container) {
// toggleAnimationClass() is a public method
// for restarting css animations with a class
content.toggleAnimationClass('is-exiting');
// Scroll user to the top
$body.animate({
scrollTop: 0
});
}
}
}).data('smoothState');
//.data('smoothState') makes public methods available
})(jQuery);
从我的错误中吸取教训
1.Don不要在 jquery.smoothstate
中创建 DIY 命名空间
我使用 #smooth
而不是 #main
作为容器 <div>
。我的 jquery 函数试图调用 jquery.smoothstate 但它不起作用,因为 #main
在 jquery.smoothstate.js 库中用作标识符。
2.Define 锚点,而不是制作 smoothstate
的每个 link 部分
在我修正了上面的错误之后又遇到了另一个问题。我在源代码中使用 bxslider。每次我在 BXslider 中按下箭头 next 或 prev 时,滑块的新副本就会出现在原始滑块上方。
我已经通过定义选项锚点解决了这个问题。这是 jquery.smoothstate 的一部分。这将排除所有其他锚点。
3.toggleAnimationClass 已弃用
使用而不是 toggleAnimationClass 函数调用 restartCSSAnimations();
使用 addClass()
添加临时 class 'is-exited'
这是完整的工作来源:
(function($) {
'use strict';
content = $('#main').smoothState({
// Runs when a link has been activated
prefetch: true,
pageCacheSize: 4,
anchors: 'link',
onStart: {
duration: 250, // Duration of our animation
render: function (url, $container) {
//add temporary class #main
$('#main').addClass('is-exited');
// for restarting css animations with a class
content.restartCSSAnimations();
}
}
}).data('smoothState');
})(jQuery);
我使用 BXslider.js 创建了一个带有 fullscreen-image 滑块的主页。滑块中的每个图像都有一个带有锚 link 的标题文本。 点击锚点 link 后,您将转到一个详细信息页面。如果您从主页移动到详细信息页面,则会出现一个过渡。这与 jquery.smoothstate.js 页面上的演示基本相同。
我遇到一个问题,BXslider 在包含 jquery.smoothstate javascript 后坏了。每次您在 BXslider 中按下箭头按钮 prev 或 next 时,滑块本身都会覆盖自身并复制 prev/next 按钮,图像将消失。在 firebug 中,我没有收到任何警告或错误。这使得调试变得困难。希望有人能帮我解决这个问题。
提前致谢!
下面是我为我的 bxslider 编写的代码。js/smootstate 网站。
主页代码
<div id="main" class="m-scene">
<div class="scene-element scene-element--fadeinup">
<section id="banner">
<div class="inner">
<div id="box">
<div class="relative-box">
<div class="logo"></div>
<h2>Client-name</h2>
<div id="captions">
<p>" This is a caption "</p>
</div>
</div>
<a href="/generic.html" class="more">To genericpage</a>
</div>
<ul class="bxslider">
<li style="background-image: url('/images/pic1.jpg');"></li>
<li style="background-image: url('/images/pic2.jpg');"></li>
<li style="background-image: url('/images/pic3');"></li>
<li style="background-image: url('/images/pic4.jpg');"></li>
<li style="background-image: url('/images/pic5.jpg');"></li>
</ul>
</div>
</section>
</div>
</div>
</div>
通用 html/css 选择器
我正在为 jquery.smootstate.js 使用通用 html/selectors。下面 html 与主页和详情页相同。
<div id="main" class="m-scene">
<div class="scene-element scene-element--fadeinup">
css3 转换
scene-element & scene-element--fadeinup 选择器用于 css3 页面动画。
@keyframes fadeInUp{
0%{opacity:0; transform:translate3d(0,100%,0);}
100%{opacity:1;transform:none;}
}
.m-scene .scene-element{
animation-duration: 0.25s;
transition-timing-function: ease-in;
animtation-fill-mode: both;
}
.m-scene .scene-element--fadeinup {animation-name:fadeInUp;}
.m-scene.is-exiting .scene-element {animation-direction: alternate-reverse;}
javascript for jquery.smoothstate.js
(function($) {
'use strict';
var $body = $('html, body'),
content = $('#smooth').smoothState({
// Runs when a link has been activated
onStart: {
duration: 250, // Duration of our animation
render: function (url, $container) {
// toggleAnimationClass() is a public method
// for restarting css animations with a class
content.toggleAnimationClass('is-exiting');
// Scroll user to the top
$body.animate({
scrollTop: 0
});
}
}
}).data('smoothState');
//.data('smoothState') makes public methods available
})(jQuery);
从我的错误中吸取教训
1.Don不要在 jquery.smoothstate
中创建 DIY 命名空间我使用 #smooth
而不是 #main
作为容器 <div>
。我的 jquery 函数试图调用 jquery.smoothstate 但它不起作用,因为 #main
在 jquery.smoothstate.js 库中用作标识符。
2.Define 锚点,而不是制作 smoothstate
的每个 link 部分在我修正了上面的错误之后又遇到了另一个问题。我在源代码中使用 bxslider。每次我在 BXslider 中按下箭头 next 或 prev 时,滑块的新副本就会出现在原始滑块上方。
我已经通过定义选项锚点解决了这个问题。这是 jquery.smoothstate 的一部分。这将排除所有其他锚点。
3.toggleAnimationClass 已弃用
使用而不是 toggleAnimationClass 函数调用 restartCSSAnimations();
使用 addClass()
添加临时 class 'is-exited'这是完整的工作来源:
(function($) {
'use strict';
content = $('#main').smoothState({
// Runs when a link has been activated
prefetch: true,
pageCacheSize: 4,
anchors: 'link',
onStart: {
duration: 250, // Duration of our animation
render: function (url, $container) {
//add temporary class #main
$('#main').addClass('is-exited');
// for restarting css animations with a class
content.restartCSSAnimations();
}
}
}).data('smoothState');
})(jQuery);