Jquery动画错误
现在是凌晨 3 点，我不是最擅长 jquery，有人能告诉我我犯了什么愚蠢的错误吗？
我在这里的 jsfiddle 中有它： http://jsfiddle.net/JamesKyle/7GWRp/
有一个css 转换中的扭结不允许它们在 :before 或 :after 元素上使用，因此我尝试使用页面上已使用的 jquery 进行解决方法。基本上这些是三种 CSS 状态：正常、悬停和活动。
（我正在尝试为顶部的小光芒设置动画）
$(document).ready(function() {
$('.button:before').mouseover(function() {
$(this).animate({
left: '0px',
opacity: 1
}, 100);
});
$('.button:before').click(function() {
$(this).animate({
left: '30px',
opacity: 0
}, 100);
});
$('.button:before').mouseout(function() {
$(this).animate({
left : '-30px',
opacity : '1'
}, 100);
});
});
it's 3 am right now and I'm not the best at jquery, can someone tell me what stupid mistake I'm making?
I have it in a jsfiddle here: http://jsfiddle.net/JamesKyle/7GWRp/
There's a kink in css transitions that don't allow them to be used on :before or :after elements, so I'm trying to do a workaround using jquery which is already being used on the page. Basically these are the three css state normal, hover, and active.
(I'm trying to animate the little shine at the top)
$(document).ready(function() {
$('.button:before').mouseover(function() {
$(this).animate({
left: '0px',
opacity: 1
}, 100);
});
$('.button:before').click(function() {
$(this).animate({
left: '30px',
opacity: 0
}, 100);
});
$('.button:before').mouseout(function() {
$(this).animate({
left : '-30px',
opacity : '1'
}, 100);
});
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这里的结论是，由于伪元素不是 DOM 的一部分，它们不能直接成为 jQuery 的目标。
插入像
这样的物理元素在我看来是最简单的解决方案，但它确实使标记...The verdict here is that, since pseudo elements are not part of the DOM, they cannot be directly targeted with jQuery.
Inserting a physical element like
<div class="button gray"><span></span>Button</div>seems to me to be the easiest solution but it does clutter the markup...