Question

我正在使用翻转Javascript插件，以便在用户将鼠标悬停在某些可点击的网页元素上时创建平滑的过渡效果。这一直很好 - 但我已经决定不使用页面加载来填充动态内容，而是我会进行ajax调用。我的问题是，由于缺乏对JavaScript的一般理解，我真的不理解这个插件。

我如何实现一个方法，在单击用户单击另一个元素之后保持元素不透明？

以下是该插件的摘录：

$(document).ready(function(){
        $("#leftBar .divider, #leftBar .dividerLast").fadeTo("9000", 0.8);
        $("#leftBar .divider, #leftBar .dividerLast").hover(function(){
            $(this).fadeTo("5000", 1.0); 
        },function(){
        $(this).fadeTo("5000", 0.8);
    });
});

这是我前端的代码：

<div class="divider" onclick="$('#employee_form').submit(); SetBackgrounds(); $(this).css('background','url(common/css/images/leftBarBG.gif) top repeat-x');">
     <img src="common/img/employee_image.jpg" class="float"/>
     <h2>Employee Name</h2>
     <h3>Founder &amp; CEO</h3>
     <p>We're passionate about bringing your great ideas to life on the web,  and in print.</p>
     <p><a href="mailto:email@company.com">employee@company.com</a></p>
</div>

我一直在使用onclick表单提交进行ajax调用。

以下是SetBackgrounds()函数的代码，您可以看到我也在使用onclick进行调用。可能有一种更好的方式来写它而不是我的方式，但正如我所说 - 当谈到Javascript时我仍然很绿。功能并不像我希望的那样顺畅，但是我希望如果我们能够使这个功能发挥作用，它将掩盖突然的背景变化。非常感谢任何建设性的批评：

function SetBackgrounds() 
{
    $("#leftBar .divider").css('background','url(common/css/images/leftBarBG-hover.gif) top repeat-x');
    $("#leftBar .dividerLast").css('background','url(common/css/images/leftBarBG-hover.gif) top repeat-x');
    $("#leftBar .divider:hover").css('background','url(common/css/images/leftBarBG.gif) top repeat-x');
    $("#leftBar .dividerLast:hover").css('background','url(common/css/images/leftBarBG.gif) top repeat-x');
}

更新提交的表单是隐藏的表单，提交给我编写的PHP脚本，用于查询员工BIOS的数据库。我没有查询问题，但这可能有助于你们中的一些人更好地理解这些按钮的完成情况。我对这个剧本所遇到的问题纯属美学。

Answer 1

我可能会遗漏一些东西，但我看不到你在哪里将元素变成不透明的onclick。

$("#leftBar .divider, #leftBar .dividerLast").click(function(){
        $(".opaque").fadeTo.("5000", 0.8).removeClass("opaque");
        $(this).fadeTo("5000", 1.0).addClass("opaque"); 
});

然后改变：

 $("#leftBar .divider, #leftBar .dividerLast").hover(function(){
        $(this).fadeTo("5000", 1.0); 
    },function(){
    if(!$(this).hasClass("opaque")) $(this).fadeTo("5000", 0.8);
});

您可以使用css()或animate()代替fadeTo()，也可以减少时间。

使用JQuery使项目淡出意识到单击的元素

1 个答案: