Creating an onAfter Event for Kwicks jQuery plugin
I'm using Kwicks jQuery plugin for my portfolio. I want to show a child container within the list item after the kwicks click event. I can't seem to find a hook for this, at least within the parameters of the kwicks plugin.
After doing some research I couldn't find anything. Anybody know how to achieve this?
I'm using jQuery 1.4.2 and Kwicks 1.5.1.
P.S. If you couldn't tell, I'm a total jQuery/javascript noob.
Code:
<script type="text/javascript">
$().ready(function() {
$('#projects').kwicks({
max : 720,
event : 'click'
});
$('.desc').show();
});
</script>
<ul id="projects">
<li>
开发者_如何学C <div class="desc">
<h3><%= project.title %></h3>
<p>blah blah blah<%= project.description %></p>
</div>
</li>
<li>
<div class="desc">
<h3><%= project.title %></h3>
<p>blah blah blah<%= project.description %></p>
</div>
</li>
</ul>
Thanks in advance for your help.
There is no way of doing it without patching Kwicks.
To patch it, in line 125 of the non-minified code after
easing: o.easing
add a comma and then:
complete: function()
{
// your code
}
Or, to use a custom function every time:
complete: o.onAfter
I ended up using fudgey's rewrite of the kwicks (http://github.com/Mottie/Kwicks) and it worked like a champ. This is what I ended up with:
$(document).ready(function() {
function hideAllDesc(){ // Fades out all descriptions that are shown before expanding a new one
$('#projects li .desc').fadeOut();
}
function showDesc(){ // Shows description on expand
$('#projects li.active .desc').fadeIn();
}
function hideDesc(){ // Hides description on collapse/mouseout
$('#projects li.active .desc').fadeOut();
}
$('#projects').kwicks({
max : 720,
event : 'click',
init : hideAllDesc,
expanding : showDesc,
collapsing : hideDesc
});
});
Thanks for your help everybody!
精彩评论