当前位置： 文江博客话题详情

.hover 函数在菜单 jquery 中停止动画

发布于 2024-09-06 20:22:56 字数 5932 浏览 5 评论 0原文

我的悬停菜单可以正常使用不透明效果，但现在我不知道它们突然没有显示悬停图像。其他动画（例如文本移动）正在运行...... 我对 Jquery 不太了解。所以严重地卡在这里。 如果需要，您可以在线查看该网站。

我还将代码粘贴到此处，以便您可以更好地查看。跨度上的动画不起作用。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/blockui.js">
</script>
<script type="text/javascript" src="js/easySlider1.7.js">
</script>
<script src="js/prettyPopin.js" type="text/javascript" charset="utf-8">
</script><!-- Let's do the animation -->

<script type="text/javascript">
//<![CDATA[

    $(function() {
        // set opacity to nill on page load
        $("ul#menu span").css("opacity","0");
        // on mouse over
        $("ul#menu span").hover(function () {
            // animate opacity to full
            $(this).stop().animate({
                opacity: 1
            }, "slow");
        },
        // on mouse out
        function () {
            // animate opacity to nill
            $(this).stop().animate({
                opacity: 0
            }, "slow");
        });
    });

//]]>
</script>
<script type="text/javascript">
//<![CDATA[

    $(document).ready(function() {

        $.blockUI({ css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#FFF',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .8,
            color: '#FFFFF'
        } });

        setTimeout($.unblockUI, 1500);
    });



</script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function() {

$(".bullet li").hover(function(){
        $(this).find('span').animate({ opacity: 0 }, 300);
        $(this).find('a').animate({paddingLeft:"85px"}, 300);
        },function(){
        $(this).find('span').animate({ opacity: 1 }, 300);
        $(this).find('a').animate({paddingLeft: "70px"}, 300);
        });
            });

//]]>
</script>
<script type="text/javascript">
//<![CDATA[


    $(document).ready(function(){
    $("#slider").easySlider({
        speed:800,
        pause:3000,
        prevId: 'prevBtn',
        nextId: 'nextBtn',
        auto: true,
        continuous: true
    });
});

//]]>
</script>
<script type="text/javascript" charset="utf-8">
//<![CDATA[

        $(document).ready(function(){
            $("a[rel^='prettyPopin']:eq(0)").prettyPopin({width: 550,followScroll:false});
                $("a[rel^='prettyPopin']:eq(1)").prettyPopin({width: 550,followScroll:false});
                    $("a[rel^='prettyPopin']:eq(2)").prettyPopin({width: 550,followScroll:false});
    });
//]]>
</script><![if !(IE 6)]>
  <link rel="stylesheet" type="text/css" href="my.css" /><![endif]><!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="myie.css" />
<![endif]-->
  <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="myie7.css" />
<![endif]-->
</head>

<body>
  <div id="wrapper">
    <div id="header">
      <div id="appoint">
        <ul>
          <li>For appointment:
          +92-55-3856686<strong>|</strong>3859676<strong>|</strong>3846888</li>
        </ul>
      </div><!--appoint div close-->

      <div id="navi">
        <ul id="menu">
          <li><a href="#" class="home"></a></li>

          <li><a href="#" class="service"></a></li>

          <li><a href="#" class="portfolio"></a></li>

          <li><a href="#" class="contact"></a></li>
        </ul>
      </div><!--navigation div close-->
    </div><!--header div close-->

这是我用于导航的 CSS

    /* Menu Body */
ul#menu {
    height:39px;
    list-style:none;
    margin:0;
    padding:0;
}

/* Float LI Elements - horizontal display */
ul#menu li {
    float:left;
}

/* Link - common attributes */
ul#menu li a {
    background:url(images/menu.png) no-repeat scroll top left;
    display:block;
    height:39px;
    position:relative;
}
    /* Span (on hover) - common attributes */
ul#menu li a span {
    background:url(images/menu.png) no-repeat scroll bottom left;
    display:block;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:100;
}

/* Span (on hover) - display pointer */
ul#menu li a span:hover {
    cursor:pointer;
}


/* Specify width and background position attributes specifically for the class: "home" */
ul#menu li a.home {
    width:83px;
}
/* Shift background position on hover for the class: "home" */
ul#menu li a.home span {
    background-position:0px -39px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.service {
    width:110px;
    background-position:-83px 0px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.service span {
    background-position:-83px -39px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.portfolio {
    width:104px;
    background-position:-193px 0px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portfolio span {
    background-position:-193px -39px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.contact {
    width:210px;
    background-position:-297px 0px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.contact span {
    background-position:-297px -39px;
}

请尽快回复我，很紧急

原文

My hover menu was working properly with opacity effects, but now i dont know suddenly they are not showing the hovered image. Other animations like movements of texts are working......
I dont know much about Jquery. So seriously stucked here.
You can see the website online if you need.

I am also pasting the code here so you can see it better. The animation on spans is not working.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/blockui.js">
</script>
<script type="text/javascript" src="js/easySlider1.7.js">
</script>
<script src="js/prettyPopin.js" type="text/javascript" charset="utf-8">
</script><!-- Let's do the animation -->

<script type="text/javascript">
//<![CDATA[

    $(function() {
        // set opacity to nill on page load
        $("ul#menu span").css("opacity","0");
        // on mouse over
        $("ul#menu span").hover(function () {
            // animate opacity to full
            $(this).stop().animate({
                opacity: 1
            }, "slow");
        },
        // on mouse out
        function () {
            // animate opacity to nill
            $(this).stop().animate({
                opacity: 0
            }, "slow");
        });
    });

//]]>
</script>
<script type="text/javascript">
//<![CDATA[

    $(document).ready(function() {

        $.blockUI({ css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#FFF',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .8,
            color: '#FFFFF'
        } });

        setTimeout($.unblockUI, 1500);
    });



</script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function() {

$(".bullet li").hover(function(){
        $(this).find('span').animate({ opacity: 0 }, 300);
        $(this).find('a').animate({paddingLeft:"85px"}, 300);
        },function(){
        $(this).find('span').animate({ opacity: 1 }, 300);
        $(this).find('a').animate({paddingLeft: "70px"}, 300);
        });
            });

//]]>
</script>
<script type="text/javascript">
//<![CDATA[


    $(document).ready(function(){
    $("#slider").easySlider({
        speed:800,
        pause:3000,
        prevId: 'prevBtn',
        nextId: 'nextBtn',
        auto: true,
        continuous: true
    });
});

//]]>
</script>
<script type="text/javascript" charset="utf-8">
//<![CDATA[

        $(document).ready(function(){
            $("a[rel^='prettyPopin']:eq(0)").prettyPopin({width: 550,followScroll:false});
                $("a[rel^='prettyPopin']:eq(1)").prettyPopin({width: 550,followScroll:false});
                    $("a[rel^='prettyPopin']:eq(2)").prettyPopin({width: 550,followScroll:false});
    });
//]]>
</script><![if !(IE 6)]>
  <link rel="stylesheet" type="text/css" href="my.css" /><![endif]><!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="myie.css" />
<![endif]-->
  <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="myie7.css" />
<![endif]-->
</head>

<body>
  <div id="wrapper">
    <div id="header">
      <div id="appoint">
        <ul>
          <li>For appointment:
          +92-55-3856686<strong>|</strong>3859676<strong>|</strong>3846888</li>
        </ul>
      </div><!--appoint div close-->

      <div id="navi">
        <ul id="menu">
          <li><a href="#" class="home"></a></li>

          <li><a href="#" class="service"></a></li>

          <li><a href="#" class="portfolio"></a></li>

          <li><a href="#" class="contact"></a></li>
        </ul>
      </div><!--navigation div close-->
    </div><!--header div close-->

and here is the CSS i am using for navigation

    /* Menu Body */
ul#menu {
    height:39px;
    list-style:none;
    margin:0;
    padding:0;
}

/* Float LI Elements - horizontal display */
ul#menu li {
    float:left;
}

/* Link - common attributes */
ul#menu li a {
    background:url(images/menu.png) no-repeat scroll top left;
    display:block;
    height:39px;
    position:relative;
}
    /* Span (on hover) - common attributes */
ul#menu li a span {
    background:url(images/menu.png) no-repeat scroll bottom left;
    display:block;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:100;
}

/* Span (on hover) - display pointer */
ul#menu li a span:hover {
    cursor:pointer;
}


/* Specify width and background position attributes specifically for the class: "home" */
ul#menu li a.home {
    width:83px;
}
/* Shift background position on hover for the class: "home" */
ul#menu li a.home span {
    background-position:0px -39px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.service {
    width:110px;
    background-position:-83px 0px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.service span {
    background-position:-83px -39px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.portfolio {
    width:104px;
    background-position:-193px 0px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portfolio span {
    background-position:-193px -39px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.contact {
    width:210px;
    background-position:-297px 0px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.contact span {
    background-position:-297px -39px;
}

Please reply me soon, its urgent

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

迷你仙 2024-09-13 20:22:56

我认为您只是缺少 ul#menu li a 内部的 ，所以它看起来像这样:

    <ul id="menu">
      <li><a href="#" class="home"><span></span></a></li>
      <li><a href="#" class="service"><span></span></a></li>
      <li><a href="#" class="portfolio"><span></span></a></li>
      <li><a href="#" class="contact"><span></span></a></li>
    </ul>

I think you're just missing the <span></span>'s from inside your ul#menu li a's, so it would look like so:

    <ul id="menu">
      <li><a href="#" class="home"><span></span></a></li>
      <li><a href="#" class="service"><span></span></a></li>
      <li><a href="#" class="portfolio"><span></span></a></li>
      <li><a href="#" class="contact"><span></span></a></li>
    </ul>
回复 原文
~没有更多了~

关于作者

黯然

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文