Jquery 更改页面“主题”和div内容_Jquery_Css_Ajax_Html_Jquery Animate

Jquery 更改页面“主题”和div内容

jquery css ajax html

Jquery 更改页面“主题”和div内容,jquery,css,ajax,html,jquery-animate,Jquery,Css,Ajax,Html,Jquery Animate,我对jQuery比较陌生，目前在转换和AJAX内容方面遇到了麻烦基本上有4个页面，每个页面都有自己的主题，一个独特的背景图像和一个着色的叠加DIV 我已经把代码贴在下面了。理论上，我认为这是正确的。但它当然不起作用代码中的注释解释了我希望看到的过程 $(document).ready(function() { // begin 'photography' theme transition $('a.photography').click(function

我对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，而不包含其他内容

我将非常感谢您的指导。谢谢大家

您需要防止在单击时发生默认操作，以便我可以对其进行处理。

您需要解释哪些操作不起作用。在JS中更改背景图像时，请确保使用绝对路径。当我单击链接时，它只需重新加载当前页面，没有更改，没有褪色，没有颜色更改，什么都没有，而不是按预期运行jquery函数。脚本本身运行良好；我检查了错误控制台，我的jQuery语法正确。将URI更改为绝对路径，但没有任何区别。几乎完美！谢谢你。我现在面临的唯一问题是，我必须单击两次才能使整个函数正常运行。当我第一次单击时，内容会消失，但我必须再次单击才能更改背景图像并显示新内容。我认为这与我的动画顺序有关，但我不确定从哪里开始。背景覆盖颜色没有改变，但我猜这是由于我在实现颜色插件时出错造成的。另一个要添加的注意事项是，不要忘记对淡出和动画等内容的回调。例如，如果你想让前两件事一件接一件地淡出，而不是一件接一件地出现，可以尝试$'contentCanvas_a'.fadeOutfunctionevent{$'contentCanvas_B'.fadeOut}//不需要使用。隐藏，淡出将隐藏它；还有一件事，如果您希望它们几乎同时淡出，请使用setTimeout本身，setTimeoutfunction{$'contentCanvas_A'.fadeOut；}，1//1毫秒等待捕捉另一个$'contentCanvas_B'。淡出//没有超时，等着和First一起骑车谢谢你们两个！这把一切都清理干净了。唯一不起作用的是背景图像的褪色和色调的变化，但我认为我可以从这里处理；这是一种可以不需要的东西。

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

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

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