0

我最近才开始学习jQuery。为了帮助我学习，我开始重新设计这个网站。我目前遇到的问题是：

  1. 单击缩略图并加载主帖子后；关闭主帖后，再次将鼠标悬停在拇指上时，标题和帖子信息不再淡入拇指上方和旁边。

  2. 第一次将鼠标悬停在拇指图像上时，您应该注意到它隐藏了所有内容（包括自身），然后再次显示自己，这给人一种闪烁的错觉。我怎样才能阻止这个？

这是包含 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>';
4

2 回答 2

1

我再去一次:-)

我查看了谷歌开发者工具，看起来这就是问题所在......

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

它将不透明度属性保留为 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);
},

这只会淡出其他的，所以你不必再次淡入 $(this) ！

手指交叉！

我已经对此进行了测试。它解决了这两个问题，并在您单击其中一个拇指时阻止浏览器转到页面顶部。

这是完整的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();

 });

});

只需剪切并粘贴它来代替您的代码。

克里斯

于 2012-06-16T14:36:13.573 回答
0

这是你的第一个问题。

尝试做...

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

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

于 2012-06-16T11:35:58.287 回答