duan19805 2013-03-13 05:32
浏览 26
已采纳

Jquery滑动框与鼠标问题

As i am trying to implement Sliding Boxes and Captions with jQuery Mouse over effect for my games thumbnails. Whenever i mouse over on a thumbnail the caption will come and when i take off the mouse pointer the caption disappears. I have implemented it but getting small issue.

The issue with jQuery mouse over is when the page is getting loaded for the first time the mouse over div comes without taking the mouse over to it which i don't want rather i want whenever the user takes the mouse pointer over the thumbnail the jquery effect should come. See my below code snippet.

Reference: (http://www.huzgames.com/) Please see the New Games Section.

Code:

<!doctype html>
<html>
<head>
<style> 
*{ padding:0px; margin:0px; }

            a{ color:#00c415; }
            h5{
                            margin: 10px 10px 0 10px;
                            color:#FFF;
                            font:13pt Segoe Print;
                            letter-spacing:-1px;
                            font-weight: bold;  }

            .boxgrid{
                /*width: 325px;
                height: 260px; */
                width: 160px;
                height: 117px;
                margin-top:10px;
                                margin-left: 4px;
                float:left;
                background:#161613;

                overflow: hidden;
                position: relative;
            }
                .boxgrid img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    border: 0;
                }
                .boxgrid p{
                    padding: 0 10px;
                    color:#afafaf;
                    font-weight:bold;
                    font:10pt "Lucida Grande", Arial, sans-serif;
                }

            .boxcaption{
                float: left;
                position: absolute;
                background: #000;
                height: 117px;
                width: 100%;
                opacity: .8;
                /* For IE 5-7 */
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
                /* For IE 8 */
                -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
            }
                .captionfull .boxcaption {
                    top: 117;
                    left: 0;
                }
                .caption .boxcaption {
                    top: 100;
                    left: 0;
                }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $('.boxgrid.captionfull').hover(function(){
    $(".cover", this).stop().animate({top:'1px'},{queue:false,duration:160});
    }, function() {
    $(".cover", this).stop().animate({top:'117px'},{queue:false,duration:160});
});
});
</script>
                </head>
                <body>
                <div class="boxgrid captionfull">
                <img src="path" height="117" width="160" alt="" />
                <div class="cover boxcaption">
                    <h5 align="center">xxxxxxxx</h5>
                    <p align="center"><a href="#" style="text-decoration:none;font-size:16px; font-family:Wanted M54"><b>Click To Play</b></a></p>
                </div>
            </div>
                </body>
                </html>
  • 写回答

1条回答 默认 最新

  • doudoulb1234 2013-03-13 05:38
    关注

    In your code i edited something-

      <script type="text/javascript">
       $(document).ready(function(){
$('.cover').hide(this);
    $('.boxgrid.captionfull').hover(function(){

    $(".cover", this).show().stop().animate({top:'1px'},{queue:false,duration:160});
    }, function() {
    $(".cover", this).show().stop().animate({top:'117px'},{queue:false,duration:160});
});
});
    </script>

    Here is a live fiddle-

    Live example

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。