标签: hoverintent

根据本指南,我尝试将JQuery加载到我的Firefox扩展中.

var Myext = {

  loadJQuery: function(wnd) {
      var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
        .getService(Components.interfaces.mozIJSSubScriptLoader);
      loader.loadSubScript("chrome://myext/content/jquery-1.7.2.min.js", wnd);
      var jQuery = wnd.jQuery.noConflict(true);
      try {
        loader.loadSubScript("chrome://myext/content/jquery.hoverIntent.js", jQuery);
      catch (Except) {
        alert(Except.toString());
      }
      return jQuery;
  },

  onLoad: function(e) {
    Myext.jQuery = Myext.loadJQuery(window);
  },

  showDialog: function(e) {
    var $ = Myext.jQuery;
    /* JQuery code */
  }

}

window.addEventListener("load", function(e) { Myext.onLoad(e); }, false);
window.addEventListener("DOMContentLoaded", function(e) { Myext.showDialog(e); }, false);

装载程序有加载问题jquery.hoverIntent.js.我在这里下载了它

错误信息: "Type Error: $ is undefined"

我刚刚完成了这个Wordpress主题的开发:http: //www.minnesdiner.com/

一切都运作良好,但我对导航并不是百分之百满意.滑动位置指示器工作顺利,但我想集成悬停意图 jQuery插件,以防止滑动指示器在用户无意中通过导航时滑动.

关于如何集成这个插件的任何想法？我正在为每个导航项触发单独的jQuery函数,并根据正在悬停的项目将坐标传递给滑动指示器.

这是我目前的jQuery代码:

 $(document).ready(function() {

        var $currentpos = $("#menu-indicator").css("left");
        $("#menu-indicator").data('storedpos', $currentpos);

        $(".current-menu-item").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: $currentpos}, 150);
        });
        $(".menu-item-26").delay(500).mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "52px"}, 150);
        });
        $(".menu-item-121").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "180px"}, 150);
        });
        $(".menu-item-29").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "310px"}, 150);
        });
        $(".menu-item-55").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "440px"}, 150);
        });
        $(".menu-item-27").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "570px"}, 150);
        });
        $(".menu-item-164").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "760px"}, 150);
        });

        $delayamt = 400;
        $("#header-row2").click(function () {
        $delayamt = 5000;
        });
        $("#header-row2").mouseleave(function () {
        $("#menu-indicator").stop().delay($delayamt).animate({left: …

是否可以在元素上触发hoverIntent。

我尝试过$(elem).trigger('hoverIntent');，但没有用。

编辑：Js Fiddle：http：//jsfiddle.net/H2p6T/

我有一组图像,我想翻转并闪烁到不同的图像半秒左右,然后恢复到原始图像,即使鼠标仍然在图像上(即没有鼠标移出) )

建议使用setTimeout,但我无法弄清楚如何正确使用它.

http://thepool.ie/rollover/

有一个页面的例子....我只是喜欢翻转时出现的图像然后再快速消失.

我在网上搜索了一些例子,找不到任何东西......任何帮助都会非常感激.

谢谢,安德鲁

编辑:

这是我目前用于悬停图像的代码

$(document).ready(function(){   
$(function() {
    $('.rollover').hover(function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    }, function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    });
});

});

我希望我能很好地描述这个问题!？你可以在这里看到它:

http://dealmob.de/index_dev.html

当你快速地将鼠标悬停在菜单上时,你会发现它不会停留,而是闪烁,就像你将边距/填充更改几个像素一样.

关于如何解决这个问题的任何建议？

非常感谢

请求:

        #topcities {
            float:right;
        }  

        #topcities li {
            padding-left:5px;
            width:100px;
        }
        #topcities li:hover {
            cursor:pointer;
            color:#000;
            background: url(images/hover_menue_back.jpg) repeat-x #FFF;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border:grey 1px solid;
            width:100px;
        }

我似乎无法让hoverIntent插件工作.它绝对是加载jQuery和hoverIntent.但是,.hoverIntent()是"不是函数".(.hover()工作正常).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#portfolio-circle').hoverIntent(
        function() {
            $('#portfolio-hover').fadeTo('normal', 1);
            $('#portfolio-caption').fadeTo('normal', 1);
        },
        function() {
            $('#portfolio-hover').fadeTo('normal', 0);
            $('#portfolio-caption').fadeTo('normal', 0);
        }
    );
});
</script>

我有以下代码:

$(document).ready(function(){
    $(".yearInner").hide();

    $(".year", this).hover(
        function () {
            $(".yearInner", this).slideToggle();
        }
    );

});

它用class yearInner隐藏div,然后当包含class year的包含div时,yearInner div切换为on.

工作正常,我想使用hoverIntent插件而不是悬停.使用hoverIntent完全不起作用.建议？

Div结构参考:

<div class="year">
    2009  
    <div class="yearInner">
        More Info...
    </div>
</div>
<div class="year">
    2008
    <div class="yearInner">
        More Info...
    </div>
</div>

我正在开发一个包含很多可悬停 div 的项目。我写了一个动画来做到这一点：

鼠标悬停时，图像淡出，作为回调，包含信息的 div 淡入。然后，鼠标移出时，信息 div 淡出，作为回调，图像淡入。我正在使用悬停意图插件。

我的问题是，如果你在 div 上停留足够长的时间，一切都会正常。但是如果你在上面停留 300 毫秒，动画就会停止，但显示信息 div 的回调仍然会被调用，忽略鼠标移出事件。这会导致 info div 永久保留......

这是我的代码：

 var infoPaneSettings = {
    sensitivity: 3,
    interval: 200,
    timeout: 500,
    over: showPane,
    out: hidePane

    }   

function showPane() {
    var entry = $(this);
    $('.featured_img', entry).fadeTo(1000, 0, 
        function(){
        $('.infoPane', entry).fadeTo(200, 1);
        });


}

function hidePane() {
    var entry = $(this);
    $('.infoPane', entry).fadeTo(300, 0, 
        function(){
        $('.featured_img', entry).fadeTo(200, 1);
        });
}

$('.entry').each(function(){
    $(this).hoverIntent(infoPaneSettings);
});

我希望你可以帮助我 ！