3

HTML/CSS/jQuery で問題が発生しています。

<div class="project-thumbnail">
        <a href="http://www.google.com/">
            <span class="project-thumbnail-overlay overlay-color">Random Title</span>
            <img width="270" height="180" src="http://i45.tinypic.com/34fgner.jpg" />
        </a>
    </div>
    <div class="zoom-button">
        <a href="http://www.yahoo.com/">
            <img src="http://i46.tinypic.com/wme8ev.png" />
        </a>
    </div>

ここで私が達成しようとしていることを見ることができます: http://jsfiddle.net/NrtvK/1/

基本的に、ほとんどの機能が動作します。ただし、プラスアイコンのアンカーにカーソルを合わせると、画像が狂ったようにカクカクし、ホバーしたサムネイルの状態が解除されます。

両方の効果が同時に機能するようにしたいのですが、プラスアイコンが別の URL を指していて、ホバーしてもホバー状態を維持します。

何か案は？ありがとう。

4

3 に答える 3

2

これは、プラス アイコンが.project-thumbnail、mouseleave で起動する の外側にあるためです。それを の中に入れて、.project-thumbnailその後 js と css を微調整してみてください。

このようなものhttp://jsfiddle.net/bondythegreat/Em4w/

于 2012-11-20T00:31:03.813 に答える
1

このようにしてみてください - DEMO

$('.portfolio-project').mouseenter(function(e) {    
    $(this).find('.project-thumbnail').children('a')
        .children('img').stop().animate({ height: imgHeight, left: '0', top: '0', width: imgWidth}, 100).end()
        .children('span').stop().fadeIn(200);
    $(this).find('.project-thumbnail').next('.zoom-button').show();
}).mouseleave(function(e) {
    $(this).find('.project-thumbnail').children('a')
        .children('img').stop().animate({ height: imgHeight + 33, left: '-20', top: '-20', width: imgWidth + 50}, 100).end()
        .children('span').stop().fadeOut(200);
    $(this).find('.project-thumbnail').next('.zoom-button').hide();
});​
于 2012-11-20T00:34:26.487 に答える
0

問題は、マウスをプラスアイコンの上に移動すると、プラスアイコンを非表示にするproject-thumbnailマウスリーブハンドラーをトリガーし、プラスアイコンを表示するproject-thumbnailマウス入力ハンドラーを再度トリガーすることですが、マウスはすでにプラスの上にあると思いますマウスを離すハンドラーを再度トリガーするなどなど。もちろん、アニメーションが繰り返し開始および停止するため、吃音は発生します。

html 構造を修正して、プラス リンクをproject-thumbnaildiv 内に配置することもできます。bondythegreat でカバーされています。

または、次のようなハックを試すこともできます。

var projectThumbnail = $('.project-thumbnail'),
        imgWidth = projectThumbnail.width(),
        imgHeight = projectThumbnail.height(),
        timeoutID; // <-- new variable

    projectThumbnail.mouseenter(function(e) {    
        $(this).children('a').children('img').stop().animate({ height: imgHeight, left: '0', top: '0', width: imgWidth}, 100);
        $(this).children('a').children('span').stop().fadeIn(200);
        $(this).next('.zoom-button').show();
    }).mouseleave(function(e) {
        // move original functionality into a timeout, saving a reference
        // to this for use within the timeout
        var $this = $(this);
        timeoutID = setTimeout(function() {
           $this.children('a').children('img').stop().animate({ height: imgHeight + 33, left: '-20', top: '-20', width: imgWidth + 50}, 100);
           $this.children('a').children('span').stop().fadeOut(200);
           $this.next('.zoom-button').hide();
        }, 5);
    });

    // cancel the timeout when entering the plus button
    $(".zoom-button").mouseenter(function(e) {
        clearTimeout(timeoutID);
    });

デモ: http://jsfiddle.net/NrtvK/2/

(私はこれがかなり危険であることを知っていますが、私は好奇心からそれを試してみました。

于 2012-11-20T00:34:17.537 に答える