Как изменить положение фона элемента при нажатии кнопки

Question

OK. Я знаю, что эта тема была покрыта сто раз. И я пробовал все последние пару часов. , , и фактически в течение последних нескольких дней. Я сейчас зол. Так хорошо, что угодно. Я просто попрошу о помощи.

Простая задача. Нажмите кнопку, чтобы изменить положение объекта. (Я хочу, чтобы на самом деле можно было щелкнуть по кнопке, а затем разбросать все элементы списка в списке о странице ... но я чувствую, как только я выясню, как сделать эту простую задачу, я могу просто понять это оттуда .

Я честно попробовал все, каждый вариант кода, который я видел в Интернете. Я не знаю, почему это не работает для меня, но я думаю, что это должно быть, потому что я Мессинг синтаксис.

<p> I want to move this text </p> 
<input type = "button" value = "Click me"> 

<script type = "text/javascript" src = "js/jquery.js"></script> 

<script type = "text/javascript"> 
    $(':button').click(function() { 
    $('p').css({backgroundPosition: '100px 0px'}); 
}); 
</script> 

.

Я попытался удалить фигурные скобки Я попробовал другие варианты, включая:

<script type = "text/javascript"> 
$(':button').click(function() { 
$('p').css('backgroundPosition', '-100px 0px'); 
}); 
</script> 

Бесчисленные часы, смотрящие здесь и в других местах, просто для решения этой простой проблемы.

Все, что я хочу, это синтаксис f'ing. Я могу легко менять цвет фона, но положение меняет две координаты, и я не знаю, почему ни одна из вещей, которые я пробовал, не срабатывала.

Спасибо за помощь заранее.

Answer 1

Ошибка в вашем jQuery, этот код верен. Проблема, похоже, связана с вашими свойствами css. Рассмотрим следующий вариант кода.

$(':button').click(function() { 
    $('p').css({'background-color': 'blue'}); 
}); 

Здесь я изменил CSS, чтобы обновить цвет фона и положение. Это прекрасно работает и демонстрируется в следующей скрипку

Fiddle: http://jsfiddle.net/7TuVx/

Я хотел бы применить CSS непосредственно к p объекта и увидеть то, что вам нужно, чтобы получить его, чтобы переместить в нужное положение, а затем обновить ваш Код jQuery соответственно

Answer 2

<script type = "text/javascript"> 
    $(':button').click(function() { 
     $('p').css('background-position', '-100px 0px'); 
    }); 
</script> 

Вы ошиблись в свойствах css.

Answer 3

backgroundPosition относится к положению изображения, установленному в качестве фона элемента. Изменение, которое не будет перемещать ваш тег <p>. Чтобы переместить элемент, вы должны изменить left и top, но вам также необходимо установить position относительно или абсолют.