我一直在努力解决问题几天没有成功所以决定在这里报名,看看是否有某种善良的人可以帮助我.手指交叉!
我正在尝试动画(淡入/淡出)无序列表中的链接的css背景颜色,当它悬停在上面时.保持无序列表结构是至关重要的,所以我不是在寻找一种解决方案,将每个链接分成它自己的div并激活它的背景颜色.
我还想限制解决方案来动画css而不是整个解决方案在js中,以便在js关闭时它简单而优雅地降级.
我有一个简单的无序导航列表,如下所示:
<div id="projectContent">
<ul class="listings">
<li><a href="*">Another Project</a></li>
<li><a href="*">Year</a></li>
<li><a href="*">Location</a></li>
<li><a href="*">Country</a></li>
<li><a href="*">Area</a></li>
</ul>
</div>
这是我的css:
#projectContent .listings{display:block; width:780px; border-top:1px solid #008BFD; margin:0; padding:0; float:left}
#projectContent .listings li{list-style:none; padding:0; line-height:1.6em}
#projectContent .listings li a{display:block; width:780px; color:#969991; text-decoration:none; border-bottom:1px solid #666; float:left; padding:0 0 1px 0;background-color:#F5F5F5; }
#projectContent .listings a:hover{background-color:#008BFD; color:#fff;}
到目前为止一直很好 - 但是我已经搜索了一个教程/插件的高低,这将允许我快速(比如50-100毫秒)淡化背景颜色当链接悬停并缓慢淡出(比如说500 -1000ms)当光标离开链接时.
我发现许多教程在链接上淡出背景图像,但几乎所有教程都涉及每个链接都在它自己的div或span中,我不想这样做......
我发现了一些我认为接近我正在寻找的教程但不幸的是他们没有提供演示这么难以确定...我明白我需要使用主要的jQuery脚本和jQuery颜色插件或核心用户界面 - 我试过两个都没有成功.
以下是我尝试过的一些jQuery示例:
var originalBG = $("#projectContent .listings li a").css("background-color");
var fadeColor = "#008BFD";
$("#projectContent .listings li a").hover( …我有一个div元素链接列表,我使用dropcontent.js在div单击链接时将内容加载到另一个.我现在想添加一些代码,将点击的链接滚动到浏览器窗口的顶部.
对于列表中的每个项目,HTML都是这样的:
<div class="work">
<h3><a class="scroll" href="project2.html">Project 2</a></h3>
<div class="projectIntro">
<p>This is some intro text for project 2</p>
</div>
<div class="pictures"></div>
</div>
我找到了点击链接时滚动到ID的教程(通过使href成为你想要滚动到的div的ID - 遗憾的是我不能这样做,因为我的href实际上是一个单独的html页面,即使它是使用dropcontent将其加载到当前页面.
我还找到了一个在页面加载时滚动到特定ID的教程,但没有一个只是说当点击给定类的锚时,将其滚动到浏览器窗口的顶部.
有人可以帮我解决这个问题吗？谢谢.
更新:
我使用以下代码运行滚动:
$('.work a').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 500);
});
但是,我的dropcontent.js已不再有效......我想因为我在同一次点击时出现了2个函数...我希望首先加载内容,然后滚动.
这是我的dropcontent.js
$('.work a').click(function(event) {
event.preventDefault();
var parent = $(this).parents(".work");
var content_holder = parent.children(".pictures");
if (parent.hasClass("selected_work")) {
close_other();
return;
}
close_other();
parent.addClass("selected_work");
content_holder.load(this + " #content .work");
$('.selected_work img').attr("src", "images/arrow_close.gif");
});
function close_other() {
var selected_work = $('.selected_work');
selected_work.children('.pictures').empty();
$('.selected_work …更新4:
我有一种可怕的感觉,这已经下滑到目前为止没有人再看到它......但为了以防万一......
我试图结合可点击的div代码和ajax加载代码(参见下面的主要代码块)每次我添加可点击的div代码时,加载停止工作.我试过了:
$(".work").on('click',function(){
window.location=$(this).find("a").attr("href");
});
$('.work a').on('click',function(event) {
event.preventDefault();
etc
这个
$('div.work').on ('click',function(event) {
window.location=$(this).find("a").attr("href");
$(this).attr("href"); event.preventDefault();
和许多其他排列 - 但他们都停止.load工作
已经耗尽了想法并变得绝望 - 请....
更新3:
还在努力解决这个问题......
更新2
由于下面的答案不断获得投票(即使我不确定为什么它适用...)我尝试了以下内容:首先我更新到jQuery 1.7.1并使用.on作为可点击的div代码:
$(".work").on('click',function(){
window.location=$(this).find("a").attr("href");
});
这没有任何区别,所以我尝试将它应用于ajax加载代码:
$('div.clickable, .work a').on('click',function(event) {
event.preventDefault();
etc
这没有任何区别......
我真的很感激为什么.live(.on)适用于这种情况,当我不想影响ajax加载的任何东西时...至少有4个成员认为它是......
更新:
如果有帮助,您可以在下面看到2个不同的版本.第一个显示了ajax负载的发生.第二个只是为可点击的div添加代码,这会阻止ajax加载工作:
http://www.spiritlevel.co.uk/clicktest/ajaxload.html
http://www.spiritlevel.co.uk/clicktest/divclick.html
原始邮寄:
我有一个div元素(.work),它包含一个h3标签,其中包含一个锚点,在单击时将ajax内容加载到另一个div(.pictures)中.
HTML看起来像这样:
<div class="work">
<img class="introPic" src="images/thumb.jpg" width="250" height="99" />
<h3><img class="arrow" src="images/arrow_open.gif" alt=">" /><a class="titlelink" href="project2.html">Project 2</a></h3>
<div class="projectIntro">
<p>This is some intro text for project 2</p>
</div>
<div class="pictures"></div>
</div>
我使用此代码可以正常运行ajax:
jQuery(function($) …