AlexB AlexB - 18 days ago 5
Javascript Question

canging jQuery cousing some custom widgets to stop functioning correctly or at all

just changed the jQuery from 1.8.2 to 1.11.3 only to discover that one of my own scripts stopped functioning correctly. More specifically only the

animate
is working and any other functions inside don't.

Also, what is little weird is that on page load on class names
out
and
close
element style is added
display:none;
I have no idea where it is set from, I assume jQuery does it automatically?

Here is my jQuery:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3" async></script>


Here is my html:

<div id="slideout">
<a class="out"></a>
<a class="close out"></a>
<a data-pin-do="embedPin" href="http://www.pinterest.com/pin/[my pin id]/"></a>
</div>


here is my script:

$(document).ready(function() {
setTimeout(function() {
$(function(obj) {
var slideout = $("#slideout");
var out = $(".outer");
var close = $(".closer");

slideout.animate({
right: "-200px"
}, 1000, function() {

});

out.click(function () {
if(!$(this).hasClass('in')){
$(this).addClass("in");
slideout.animate({
right: "0px"
}, {
queue: false,
duration: 500
});
}
});

out.click(function() {
$(this).removeClass("in");
slideout.animate({
right: "-200px"
}, {
queue: false,
duration: 500
});
});

close.click(function() {
$(this).removeClass("outer");
slideout.animate({
right: "-200px"
}, {
queue: false,
duration: 1000
});
slideout.fadeOut({
duration: 1000
});
});
});
}, 4000);
});
(function (d) {
var f = d.getElementsByTagName('SCRIPT')[0],
p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));


Any help is appreciated

Answer

toggle(fn,fn) was deprecated in version 1.8 and removed in version 1.9.

You will need to refactor your use of it to a click event. Use hasClass() to check current state and react accordingly