Velocity.js显示：与左侧结合使用时，“ block”不起作用：“-50px”

Question

Any ideas why when I add {left: '-50px'}, to the velocity command that the display: 'block' and opacity: 1 aren't applied.

In the CSS .popover is set to display: none and opacity: 0

The whole thing works fine if I remove the display property out of velocity and use .show() from jQuery, but I want to try do it all in velocity.

('.popover').velocity({left: '-50px'}, {"opacity": 1}, {display: 'block'});

Answer 1

You are using it wrong, the first object passed to velocity needs to contain the properties to be animated, with the second you are passing options:

$('.popover').velocity({
     left: '-50px',
     opacity: 1,
     display: 'block'
}, {duration: 1000});

According to the documentation :

$element.velocity({ 
width: "500px",
property2: value2
}, {
/* Velocity's default options */
duration: 400,
easing: "swing",
queue: "",
begin: undefined,
progress: undefined,
complete: undefined,
display: undefined,
visibility: undefined,
loop: false,
delay: false,
mobileHA: true
});