Question

我对jQuery比较陌生，而且我目前在转换和AJAX内容方面遇到了麻烦。

基本上有4个页面，每个页面都有自己的“主题”（带有着色叠加DIV的独特背景图像）。

我发布了以下代码。从理论上讲，它对我来说是 看起来 。但当然它不起作用。

代码中的注释解释了我希望看到的过程。

     $(document).ready(function() {  

      // begin 'photography' theme transition

    $('a.photography').click(function() {  

       // 1. these next two lines hide the content containers and their data 
    $('#contentCanvas_A').fadeOut().hide();  
     $('#contentCanvas_B').fadeOut().hide();

     // 2. animate/fade the tint color for the #contentCanvas overlay
     $('#Window').animate({ backgroundColor: "rgba('67,32,12,0.8')}, "slow"});


     // 3. seamless fade swap of the <body> background image possible? 
     $('body').css('background-image','url(bgimage-photography.jpg)').fadeIn("slow");


      // 4. Finally, fade in new content from external HTML file
     $('#contentCanvas_A').stop().load("photography.html").delay(800).fadeIn("slow");


     });

...这就是HTML链接的外观：

<a class="photography" href="" title="online photo gallery">Photography</a>

这是正确/有效的方式吗？使用变量和“＃”符号尝试它似乎不起作用。

一些注意事项：

我试图创建一个具有背景图像的单独DIV，但我无法将其填满整个屏幕 - 它只显示顶部的前5个像素左右。因此，如代码所示，我正在尝试更改实际 body 元素的背景图像。

“photography.html”文件（以及其他类似文件）仅包含其内容布局的DIV，没有别的。

我非常感谢这方面的指导。谢谢大家！

Answer 1

单击<a>时，需要阻止发生默认操作。只需修改第一行代码即可：

$('a.photography').click(function(e) {

请注意e内的function(e)。

然后，在该函数中，放置e.preventDefault();。这可以在点击处理函数中的任何位置。

修改 - 回应我的回答评论：我不是100％肯定你为什么会遇到这个问题，但我确实看到你的代码存在问题的地方：

$('#contentCanvas_A').fadeOut().hide();

执行此操作时，hide()方法在调用fadeOut()方法后立即运行，而等待以完成fadeOut方法。所有jQuery的动画方法都允许您传入一个“回调”函数，该函数将在动画方法完成后执行。例如：

$('#contentCanvas_A').fadeOut(250, function(){
    alert('fadeOut finished!');
});

如果你这样做，你会看到元素淡出，一旦它完全消失，你就会得到警报。顺便说一句，此处无需拨打hide()，因为fadeOut()实际上会在最后为您执行此操作。

应该放在此回调函数（警报所在的位置）中的代码的主要部分是最后一行：

 $('#contentCanvas_A').stop().load("photography.html").delay(800).fadeIn("slow");

一旦你把它放在回调函数中，你可能会发现你不再需要delay()方法调用，因为在执行之前整条线已经等待初始fadeOut完成了。

无论如何，我不确定这是否能为您提供足够的信息来完全解决您的问题。如果没有，那么如果您将代码放入jsFiddle以便我可以使用它，那么此时会更容易。

更改页面“主题”以及div内容

1 个答案: