-4

我有一个三角形指针，当单击按钮时，它应该移动到某个位置（比如说向右 50 像素）。我是 jQuery 新手 - 如何使用 jQuery 来完成？

HTML 代码如下：

<div class="pointerholder">
   <div class="pointer"></div>
</div>

CSS：

.pointerholder {
   position: relative;
   width: 600px;
   margin: auto;
}

.pointer {
   position: absolute;
   bottom: 0px;
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 10px 13px 10px;
   border-color: transparent transparent red transparent;
   line-height: 0px;
   _border-color: #000000 #000000 #f4f5f5 #000000;
   _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');  
}

滑动动画也能实现吗？

谢谢！

4

3 回答 3

1

尝试

$(document).ready(function() {
    $('#button').on('click', function() {
        $('.pointerholder').animate({
            'left': '+=50px'
        });
    });
});

JSFiddle

于 2013-11-12T14:35:30.337 回答
0

你试过这个吗？

 $('.pointer').animate({
        left: +600
    },1500)
于 2013-11-12T14:45:52.493 回答
0

简单点！:)

尝试这个：

$('button').click(function () {
  $('pointer').css('margin-left', '10px');
}

或者向边距添加任何其他值，使其移动 10 px。您将需要删除position: absolute;或者您可以使用它：

$('pointer').css('left', '10'); // 10px margin from left..to the right

为此，您可以使用以下命令：

.animate();

转到下面的链接以了解有关它们的更多信息，因为您现在想学习它们！:)

参考

http://api.jquery.com/animate/

http://api.jquery.com/css/

于 2013-11-12T14:34:56.607 回答