Действительно ли это код jquery?

Question

Мое намерение состоит в том, чтобы увеличить ширину элемента на 10px при наведении курсора мыши и уменьшить его на 10px при наведении курсора мыши, что является шириной по умолчанию в css.

на основе других ответов на форуме, я думал, что я мог бы использовать:

$("#theelement").mouseenter(function() { 
    $(this).css({"width": $(this.width()+10}) 
    } 
$("#theelement").mousleave(function() { 
    $(this).css({"width": $(this.width()-10}) 
    } 

вещи не работают прямо сейчас, и я не уверен, если это преступник или нет. В простом javascript мы добавляем «px», который я знаю, но не уверен в этом. В любом случае я бы хотел изменить ширину элемента на лету, не зная его статической ширины.

Answer 1

Вы ошибка синтаксиса, вам не хватает ); на пару и $(this.width() потребности быть $(this).width()

$("#theelement").mouseenter(function() { 
    $(this).css({ 
     "width": $(this).width() + 10 
    }); 
}); //Here 
$("#theelement").mousleave(function() { 
    $(this).css({ 
     "width": $(this).width() - 10 
    }) 
}); //And Here 

В качестве примечания:

Вы можете просто использовать .hover()

$("#theelement").hover(function() { 
    $(this).css({ 
     "width": $(this).width() + 10 
    }); 
}, function() { 
    $(this).css({ 
     "width": $(this).width() - 10 
    }); 
}); 

Answer 2

Нет, $(this.width() должно быть следующим: $(this).width(); и как предыдущий Отвечающий сказал, что вы имеете синтаксическую ошибку недостающую );

$("#theelement").mouseenter(function() { 
    $(this).css({"width": $(this).width()+10}) 
    }); 

$("#theelement").mousleave(function() { 
    $(this).css({"width": $(this).width()-10}) 
    }); 

Answer 3

$('#theelement').mouseenter(function() { 
    $(this).width(function (index, value) { 
     return value + 10; 
    }); 
}).mouseleave(function() { 
    $(this).width(function (index, value) { 
     return value - 10; 
    }); 
}); 

Это, безусловно, работает. Проверьте это!

Answer 4

Use this code: Simple and short!! 



$(function(){ 
    $("#theelement").hover(
     function(){ 
      $(this).css({"width": $(this).width()+10}); 
     }, 
     function(){ 
      $(this).css({"width": $(this).width()-10}); 
     } 
    );        
});