Question

我刚刚开始学习jQuery。为了帮助我学习，我开始重新设计this网站。我目前遇到的问题是：

单击拇指图像并加载主帖子;关闭主帖后，当再次悬停在拇指上时，标题和帖子信息不再在拇指上方和旁边淡出。
当您第一次将鼠标悬停在拇指图像上时，您应该注意到它隐藏了所有内容（包括其自身），然后再次显示自己，这会让人觉得它会闪烁。我怎么能阻止这个？

这是包含jQuery代码的.js文件：

$(".post").hover(
    function () {
        $(this).children(".post_title, .post_info").stop(true).fadeIn();
        $(this).children(".link-to-post").stop().show();
        $(".post").stop().fadeTo(0,0.2);
        $(this).fadeTo(300,1);
    },
    function () {
        $(this).parent().find(".post_title, .post_info").stop(true).hide();
        $(this).parent().find(".link-to-post").stop().hide();
        $(".post").stop().fadeTo(300,1);
    });

    $(".cover-img").click(function(){
        $("#main-post").fadeIn(1000);
        $.post("inc/fullpost.php", {postid: $(this).data('postid')},
            function(output){
                $("#gotpostid").html(output).show();
            }).fail(function(x,y,z){
                $("#gotpostid").html(x + "<br />" + y + "<br />" + z)
            });
        $('.post').fadeTo(0,0);
    });

    $('input[name=close]').click(function(){
        $(this).closest('#main-post').hide();

每个缩略图都在自己的类中：

// Retrieve all active posts order by lastest first
$resultarray = retrieve_active_posts();

echo '<div id="content-wrap">';
foreach($resultarray AS $value){
    $filename = substr($value['img_file_name'],9);
    $cat_id = $value['cat_id'];
    echo '<article class="post">';
    echo '<div class="post_title">' . stripslashes(stripslashes($value['post_title'])) . '</div>';
    echo '<div class="post_info">' .
    'Category: ' . $cat_name = get_cat_name($cat_id) .'<br />'.
    'Year: ' . $value['post_year'] .'<br />'.
    stripslashes($value['post_desc']) .'<br />'.
    '</div>';
    echo '<div class="link-to-post"><a href="#">Click to view</a></div>';
    echo '<a href="#'.$value['post_id'].'" class="linktopost"><img class="post-thumb" src="img/thumb_/'.$filename.'" alt="MJbox Michael Jackson memorabilia thumbnail" data-postid="'.$value['post_id'].'"/></a>';
    echo '<a href="#'.$value['post_id'].'" class="linktopost"><img class="cover-img" src="img/post-bg-1.png" alt="test" data-postid="'.$value['post_id'].'"/></a>';
    echo '</article>';
}
echo '</div>';

Answer 1

我还有另外一步： - ）

我查看了Google Developer Tools，看起来这就是问题...

 $('.post').fadeTo(0,0);

它将opacity属性保留为0.当我在开发人员工具中覆盖它时，弹出窗口再次显示。尝试将其更改为：

 $('.post').fadeOut;

甚至

 $('.post').hide();

应该做的伎俩。

我很确定我能解决另一个问题：

你有两个动画。你正在淡化所有.post项目，然后再次淡化$（this）。你需要这个解决方案：

$(".post").hover(
function () {
    $(this).children(".post_title, .post_info").stop(true).fadeIn();
    $(this).children(".link-to-post").stop().show();
    $(this).siblings.().stop().fadeTo(0,0.2);
},

这将只淡出其他的，所以你不必再次褪色$（这个）！

手指交叉！

我测试了这个。它修复了这两个问题，并且当您单击其中一个拇指时，也会停止浏览器转到页面顶部。

这是完整的jQuery代码

$(document).ready(function(){
$(".fancybox").fancybox();


$("#login").click(function(){
    $("#searchform").hide();
    $("#loginform").fadeIn('3000','swing'); 
});

$("#search").click(function(){
    $("#loginform").hide();
    $("#searchform").fadeIn('3000','swing');    

});

$(".post").hover(
  function () {
    $(this).children(".post_title, .post_info").stop(true).fadeIn();
    $(this).children(".link-to-post").stop().show();
    $(this).siblings().stop().fadeTo(0,0.2);
  }, 
  function () {
    $(this).parent().find(".post_title, .post_info").stop(true).hide();
    $(this).parent().find(".link-to-post").stop().hide();
    $(".post").stop().fadeTo(300,1);
  });

  $(".cover-img").click(function(e){
    e.preventDefault();
    $("#main-post").fadeIn(1000);
    $.post("inc/fullpost.php", {postid: $(this).data('postid')},
        function(output){
            $("#gotpostid").html(output).show();
        }).fail(function(x,y,z){ 
            $("#gotpostid").html(x + "<br />" + y + "<br />" + z)
        });
    $('.post').fadeOut();

 });

 $('input[name=close]').click(function(){
    $(this).closest('#main-post').hide();

 });

}）;

只需剪切并粘贴代码即可。

克里斯

Answer 2

这是你的第一个问题。

尝试做...

$(".cover-img").click(function(e){
        e.preventDefault();
        .... rest of your code

这可以防止浏览器的默认行为跟随链接。这可能会解决您的第一个问题，但无论如何都应该在点击事件中。

无法让动画在jQuery中正常工作

2 个答案: