Passing variables and making a plugin
Ok, so I used this jquery, and i want to be able to pass a couple variables in and make a plugin from it:
so heres my scripts:
<script type="text/javascript">
$(function() {
$('#head h1').removeClass('hover_title');
$('#head h1 a').append('<span class="hover" />').each(function() {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function() {
//on hover
$span.stop().fadeTo(300, 1);
}, function(){
// off hover
$span.stop().fadeTo(200, 0);
})
});
});
</script>
heres what i have so far:
(function($){
$.fn.lawlFade = (function() {
var hover_remove_class = {
class: 'hover_title'
}
var settings = $.extend({}, class, removeClass_var, appendClass_var);
$(removeClass_var).removeClass("'" + class + "'");
$(appendClass_var).append('<span class="hover" />').each(function() {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function() {
//on hover
$span.stop().fadeTo(300, 1);
}, function(){
// off hover
$span.stop().fadeTo(200, 0);
})
});
});
//return jquery object for chains
return this;
}) (jQuery);
I'm looking to have the plugin work like:
lawlFade(classNameHere, removeClass_var, appendClass_var);
so for instance if i want it to remove hover_class_title from #head h1 and add a span to #head h1 a ...
I would be able to do lawlFade(hover_class_title, '#head h1', '#head h1 a');
Hopefully someone gets what I'm trying to do here.
~Shane