Emily Emily - 7 months ago 32
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);

//$('#imagenes div:gt(0)').hide();
setInterval(function() {
}, 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">

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

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


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


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

Regards! :-)


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() {
}, 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.