正在寻找解决此问题的方法。我在 wordpress 上设置了 velocity，但似乎碰壁了。当我引用 velocity 时，我得到 Velocity not defined，当我引用 $.Velocity 时，我得到 $ not defined。 Jquery 1.11.3 和 Velocity 已安装，但我在 velocity 上运行的脚本不会调用任何 Jquery 项。
任何帮助将不胜感激。
// Velocity.js instead of CSS for performance
var city = document.querySelector('.js-city-1');
var fulllogo = document.querySelector('.cityanimation');
var loading = [animatecity()];
function animatecity() {
// Reset
Velocity(city, {
'stroke-dasharray': 3542,
'stroke-dashoffset': 3542
}, 0);
// Animate
Velocity(city, {
'stroke-dashoffset': 0
}, {
duration: 20000,
complete: function() {
Velocity(city, {
opacity: 0
}, {
duration: 500
}), animatefulllogo();
}
,
});
}
function animatefulllogo() {
// Reset
Velocity(fulllogo, {
opacity: 1
}, 0);
// Animate
Velocity(fulllogo, {
opacity: 0
}, {
duration: 200,
complete: function() {;
}
});
};
Velocity.RunSequence(loading);#loadscreen{
z-index: 9999;
width: 100%;
height: 100%;
overflow: hidden;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
position: fixed;
background-color: #FFF;
}
#loaderimage{
background-image: url(/wp-content/themes/silicon-city/images/SiliconCity.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
-webkit-background-size: 100%;
-ms-background-size: 100%;
background-size: 100%;
max-width:1035px;
min-width:360px;
position: fixed;
}
#Layer_1{
margin-top:8px;
}
.cityanimation {
background-color: #FFF;
top:50%;
left:50%;
width:75%;
max-width:1035px;
min-width:360px;
position: fixed;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Safari */
}
.st0{
fill:none;
stroke:#28B24B;
stroke-width:.15em;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
<div id="loadscreen">
<div id="loaderimage">
<div class="cityanimation">
<object>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1035 393" style="enable-background:new 0 0 1035 393;" xml:space="preserve">
<path class="st0 js-city-1" d="M1.521,213.364h59.398l6.658-0.488v-57.018h15.737v-6.528l10.905-0.134v5.685h17.706l0.122,3.899h1.178h7.636
v23.01l6.009,0.057v-3.574h5.524v4.145h12.426l0.082-4.956h6.822v2.597h5.685V139.75h4.009v-8.015h1.649v-4.713h1.415v-4.716h1.18
v-6.363h1.649v6.363h0.942v4.244h1.887v5.422h11.551v3.065l13.673,13.674v28.289l16.138-0.351v-24.526h2.438v-7.961h32.489v25.018
h4.873v-23.396h13.646v12.35h19.492v18.191h3.574v11.35l16.245,0.027v-35.578h29.727v11.914h10.942l0.268-34.333h19.33v28.102h9.746
l1.625,37.933h8.937v-17.652l42.396-1.598V158.78h13.807l2.763-112.293h2.436v-3.899h5.684v-8.936h-1.136v-2.437h1.623V2.139
L453.054,1l0.49,0.976v29.239h1.786v2.437h-1.299v8.771h5.847v3.899h2.926l2.422,136.264h8.765l0.183-10.971h4.063v-2.762
c0,0,7.389-6.746,13.97,0l1.625-6.498l8.284-5.847l7.637,5.197l2.596,5.196h4.225v-8.932h18.844v23.555h9.096v15.568l23.398-0.359
v-24.518h5.463v-5.809h6.764v-25.592h24.609v36.268h27.301v-17.017h9.902v-7.386h9.695v3.806h16.051v3.136h13.098v3.806h3.158
v-14.778h4.408l1.732-19.33l2.691,19.371h3.584v18.543h4.215v5.15h10.146v14.332h7.527v-12.093h2.74V141.26h2.951v-5.151h12.334
v36.05h3.795v22.393h5.609v-17.914h8.773l2.316-0.006v24.859h14.514h2.529v-15.662h3.939v-13.444h3.775V88.216h2.713v-6.998h4.416
v-6.996h1.988c0.1-0.31,0.209-0.6,0.285-0.898c1.094-4.186,1.883-8.421,1.992-12.759c0.029-1.136,0.055-2.275-0.025-3.406
c-0.072-0.959,0.209-1.709,0.934-2.299c0.225-0.181,0.289-0.365,0.289-0.636c-0.008-4.522,0.037-9.042-0.027-13.56l0.049-0.999
c-0.016,4.854-0.006,9.711-0.014,14.57c0,0.299,0.035,0.49,0.367,0.642c0.652,0.3,1.113,0.844,1.24,1.553
c0.086,0.497,0,1.021,0.004,1.533c0.006,1.682-0.076,3.372,0.059,5.042c0.162,1.95,0.451,3.896,0.809,5.823
c0.336,1.814,0.828,3.597,1.25,5.394c0.055,0.239,0.174,0.334,0.436,0.324c0.541-0.024,1.086-0.007,1.674-0.007v7.019h4.143v6.982
h2.924v84.164h3.479v8.4h4.441l4.865,0.002v-16.695v-12.764h7.533v-3.808h13.012v-9.853h5.395v15.004h9.057v-18.136h17.057v10.075
h12.141v-4.702h4.238v4.477h5.395v-8.507h10.02v9.18h4.049v19.928h7.23v7.611h7.6v-17.018h1.732v-3.58h10.404v43.213h10.994v-86.428
h2.311v-3.357h2.699v-3.582h16.752v4.029h2.508v3.583h1.926v83.945h5.852l-0.031-56.667l0.678-5.362l-1.469-0.789l0.057-0.396h1.525
l0.111-16.925l0.336-1.243l1.297-0.395l0.287-3.723l0.732-1.581c-0.074-1.429-0.574-2.858,0.619-4.289
c0.26-1.902-0.264-4.195,1.355-5.417c0.27-2.018-0.154-4.479,1.639-5.528c0.332-1.789-0.354-3.573,1.07-5.36
c0.236-2.353,0.145-4.705,1.072-7.053l0.336-5.304l0.283-19.241l0.678,18.279l0.678,6.827c0.838,2.051,0.635,4.103,0.789,6.151
c1.395,1.619,0.92,3.236,0.902,4.855c2.518,1.938,1.785,4.069,1.92,6.149c1.561,0.804,1.262,3.283,1.41,5.36
c1.109,1.447,0.959,2.898,0.902,4.344c0.451,1.581,0.695,3.16,0.848,4.74l1.352,1.129l0.451,5.076l0.115,13.262l0.676,0.563
l0.678-0.506l0.395,0.111l-0.057,0.508l-1.354,0.677v5.643l0.508,0.339l0.557,50.658h8.58v-11.014h19.199l-0.006,0.919v34.813
l7.383,1.607l-14.375,0.805l14.375,2.41l-15.15,1.205l15.924,2.412l-14.76,1.607l6.604,1.205v57.908h-15.236h-8.654h-33.711"/>
</svg>
</object>
</div>
</div>
</div>我还尝试了以下...认为它可能值得一试..
jQuery.noConflict();
(function( $ ) {
$(function() {
// Velocity.min.js instead of CSS for performance
var $city = $(".js-city"),
$fulllogo = $(".cityanimation");
var loading = [animatecity()];
function animatecity() {
// Reset
$city
.velocity({
'stroke-dasharray': 3542,
'stroke-dashoffset': 3542
}, 0);
// Animate
$city
.velocity({
'stroke-dashoffset': 0
}, {
duration: 20000,
complete: function() {
$city
.velocity({
opacity: 0
}, {
duration: 500
}), animatefulllogo();
}
,
});
}
function animatefulllogo() {
// Reset
$fulllogo
.velocity({
opacity: 1
}, 0);
// Animate
$fulllogo
.velocity({
opacity: 0
}, {
duration: 200,
complete: function() {;
}
});
};
animatecity();
});
})(jQuery);好吧...结束了这个...但看起来 Velocity.js 没有加载到窗口上。我确认查看 Velocity.js 是否在正确的目录中，确实如此。动画仍然不起作用，但我没有收到任何错误。
(function($) {
// Velocity.min.js instead of CSS for performance
var city = document.querySelector('.js-city');
var fulllogo = document.querySelector('.cityanimation');
function animatecity() {
// Reset
$.Velocity(city, {
'stroke-dasharray': 3542,
'stroke-dashoffset': 3542
}, 0);
// Animate
$.Velocity(city, {
'stroke-dashoffset': 0
}, {
duration: 20000,
complete: function() {
$.Velocity(city, {
opacity: 0
}, {
duration: 500
}), animatefulllogo();
}
,
});
}
function animatefulllogo() {
// Reset
$.Velocity(fulllogo, {
opacity: 1
}, 0);
// Animate
$.Velocity(fulllogo, {
opacity: 0
}, {
duration: 200,
complete: function() {;
}
});
};
animatecity();
})(jQuery);最佳答案
您需要在标记脚本中声明速度之前声明 jquery
可以看到velocity依赖包依赖于jquery 1.4以上的版本，所以是依赖于jquery。
原因是 word press 实际上将 jQuery 定义为 jQuery 而不是 $.如果您运行此代码:
jquery(document).ready(function () {
var $ = jQuery;
console.log('Now jquery is $', $);
});
所以你应该有 jQuery 的源代码，然后分配给 $，最后是 velocity 的源代码。
关于javascript - 引用错误 : Velocity is not defined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33619091/