0

私は最近jQueryを学び始めました。学習を支援するために、このWeb サイトの再設計を開始しました。現時点で私が抱えている問題は次のとおりです。

  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

私はもう一度行きます:-)

私はGoogle Developer Toolsを見てきましたが、これが問題のようです...

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

opacity 属性を 0 のままにしています。開発者ツールでこれをオーバーライドすると、ポップアップが再び表示されます。次のように変更してみてください。

 $('.post').fadeOut;

あるいは

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

トリックを行う必要があります。

私は他の問題に対する答えを持っていると確信しています：

2 つのアニメーションがあります。すべての .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) を再びフェードインする必要はありません!

成功を祈っている！

私はこれをテストしました。両方の問題を修正し、サムの 1 つをクリックしたときにブラウザーがページの上部に移動するのを停止します。

ここに完全な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 に答える