Emily Emily - 3 months ago 10
Javascript Question

I need to make a plugin that will take effect the user chooses

I am developing a jquery plugin and the problem I have is that when trying to pass settings, works with two of the three options I try to set. When I want to pass the "fadeIn" effect does not display me anything and stops working. This is my code:



// JavaScript Document
jQuery.fn.slider = function(opciones) {

var configuracion = {
efecto: "fadeIn",
velocidadEfecto: 1000,
tiempoPausa: 3000
}

jQuery.extend(configuracion, opciones);

this.each(function() {
elem = $(this);
elem.find('div:gt(0)').hide();

//$('#imagenes div:gt(0)').hide();
setInterval(function() {
elem.find('div:first-child').fadeOut(0)
.next('div')[configuracion.efecto](configuracion.velocidadEfecto)
.end().appendTo('#imagenes');
}, configuracion.tiempoPausa);

});




return this;
};

#imagenes {
width: 200px;
height: 200px;
border: 1px solid grey;
position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script type="text/javascript">
$(document).ready(function() {
$("#imagenes").slider({
efecto: "slideUp",
velocidadEfecto: 2000,
tiempoPausa: 4000
})
});
</script>

</head>

<body>
<h2>Slider</h2>
<div id="imagenes">
<div>
<img src="http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg" id="foto1" />
</div>
<div>
<img src="http://davidnaylor.org/temp/firefox-logo-200x200.png" id="foto2" />
</div>
<div>
<img src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" id="foto3" />
</div>
</div>
</body>

</html>





I don't understand why "slideUp" effect not working. Thank you!

Regards! :-)

Answer

You can reference methods and attributes via string names, like "fadeIn" in your example, but you have to use bracket [] notation, not dot .

setInterval(function() {
  elem.find('div:first-child').fadeOut(0)
    .next('div')[configuracion.efecto](configuracion.velocidadEfecto)
    .end().appendTo('#imagenes');
}, configuracion.tiempoPausa);

If you don't use brackets, Javascript is going to look for a configuracion property on the next('div') object, with an efecto method attached to it (which isn't the case). Using brackets works out to .next('div')['fadeIn'](configuracion.velocidadEfecto) because configuracion.efecto is evaluated to its string value.

Hope this helps.