Question

我有一个问题，我真的无法解决，希望你们可以帮助我，因为我相对较新的css / js。我正在尝试使用整洁的CSS3页面过渡模板以及fancybox库。

一切都很好但是当我使用jquery.fancybox.js模板菜单链接不再工作时，我点击它们没有任何反应，转换不再发生。我怀疑使用href s有两个问题（模板是使用href的单页网站，.js调用图片也是如此？）

抱歉我的英语不好，缺乏成熟的问题，希望有人知道我在说什么，可以帮助我。干杯！

编辑：

非常感谢您尝试提供帮助，这里有2个链接，请注意页面上的所有内容都是我从网上复制过的代码，没有什么是我的，仅用于测试目的。

not working with jquery fancybox

这个你可以看到jquery正在发挥其魔力，当你点击投资组合中的视图时图像被正确显示但是菜单不再工作而你无法导航。

working without the jquery fancybox

这个没有jsquery你可以看到导航正常工作并且页面转换发生了，但当你点击投资组合中的视图缩略图时，你只能看到.jpeg，ofcourse ...并且无法通过图片导航。

非常感谢帮助希望这是可以修复的，所以我可以使用一个工作的jquery fancybox图像视图，页面转换正常工作！

Answer 1

它不是杀死你的CSS3过渡的花式框。该问题由script.js文件中的此行创建：

$('a').bind('click', function (event) {
  var $anchor = $(this);
  $('html, body').stop().animate({
    scrollTop: $($anchor.attr("href")).offset().top
  }, 1000, "easeOutExpo");
  event.preventDefault();
});

...您将event.preventDefault()设置为所有网页中的锚点，包括fancybox绑定的锚点（<a class="fancybox" ...>）。

例如，如果您注释掉event.preventDefault()，那么您将无缝地运行fancybox和CSS3过渡。

参见 JSFIDDLE

一般来说，绑定事件或将css规则应用于一般元素或标签并不是一个好主意，而是使用特异性，主要是当你有几个插件将其他事件绑定到这些元素时......所以不要做

$('a')

DO

$('a.selector')

jquery.fancybox.js杀死我的CSS3页面转换模板

1 个答案: